css - 带有响应式 CSS 掩码的 Bootstrap

Question

我不能在我的类 svgmask 中使用宽度和高度 100%，因为 bootstrap 不接受这个值，所以我无法在我的网站上获得响应式掩码。我该如何解决？

jsfiddle - 例如，svgmask 宽度设置为 500px，高度设置为 300px。

Answer 1

这是您要找的吗？

给

div#svgmask-img {
    background-size: contain;
}

div.svgmask {
   	mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png);
   	-webkit-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -o-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -ms-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
		overflow: hidden;
		position: relative;
		margin: 8px;
		height: 300px;
		width: 500px;
}

div#svgmask-img {
   	background: url(http://27.media.tumblr.com/tumblr_lgcrktvVwG1qboti3o1_500.jpg) no-repeat;
		background-size: contain;
		position: absolute;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
}

<div class="svgmask"> <div id="svgmask-img"></div> </div>

编辑 要获得 100% 的高度，您必须为 body 和 html 标签设置 100% 的高度。

body, html{
  height: 100%;
}

div.svgmask {
   	mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png);
   	-webkit-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -o-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -ms-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
		overflow: hidden;
		position: relative;
		margin: 8px;
		height: 100%;
		width: 100%;;
}

div#svgmask-img {
   	background: url(http://27.media.tumblr.com/tumblr_lgcrktvVwG1qboti3o1_500.jpg) no-repeat;
		background-size: 100%;
		position: absolute;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
}

<div class="svgmask"> <div id="svgmask-img"></div> </div>