带有响应式 CSS 掩码的引导程序答案

【问题标题】：Bootstrap with Responsive CSS Mask带有响应式 CSS 掩码的引导程序
【发布时间】：2016-01-27 16:06:37
【问题描述】：

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

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

【问题讨论】：

是的。仅当您对svgmask 使用固定宽度和高度时。尝试将其更改为 100%，它将停止工作。我想要一个响应式元素，而不是一个固定大小的元素。
我已经更新了你的 css，它与 bootstrap 配合得很好，你只需要给父级指定高度，例如'body，html { height:100%}' 检查小提琴 - jsfiddle.net/prvoq0e1/1

标签： css twitter-bootstrap svg mask

【解决方案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;
}

&lt;div class="svgmask"&gt; &lt;div id="svgmask-img"&gt;&lt;/div&gt; &lt;/div&gt;

编辑要获得 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;
}

&lt;div class="svgmask"&gt; &lt;div id="svgmask-img"&gt;&lt;/div&gt; &lt;/div&gt;

【讨论】：

对 svgmask 元素使用高度和宽度 100% 做同样的事情。
– 您的代码可以工作，但不能在引导程序上运行。我不知道为什么。 [更新] (jsfiddle.net/prvoq0e1/2)
我会检查这个。你想让面具也得到 100% 的高度吗？
看看这个 - jsfiddle.net/Jinukurian7/prvoq0e1/3 只需删除包含并在“div.svgmask”中添加封面