Bootstrap 带有响应式 CSS 面具

Question

我不能对我的 class 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% 高度，您必须为正文和 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>

Bootstrap 带有响应式 CSS 面具

Bootstrap with Responsive CSS Mask

css

svg

mask

twitter-bootstrap