html - 在 css 中使用 div 作为剪贴蒙版

Question

我有一个具有背景尺寸的背景图片：封面；应用到它，然后覆盖一系列 div，我想成为单独的剪贴蒙版。

我看过功能片段： rect(20px, 20px, 20px, 20px,); 但是，由于 div 是通过 CMS 系统引入的，因此定义集合大小是不合适的。

有没有办法使用剪贴蒙版属性设置 div，以便在 div 放置在页面上的任何位置剪辑图像？

我也不是特别想使用图像叠加层，因为这个站点会响应。

Answer 1

如果我理解正确，您只是在寻找一个可以根据屏幕大小调整大小的叠加层，以及带有背景图像的 div？

在这种情况下，如果可能的话，为什么不简单地将这些 div 附加到需要剪辑的 div 中，就像这样。对于这个示例，我只使用了一个带有透明背景和边框的 div。如果您需要将图像裁剪为非矩形，则需要更多 div（例如，对于平行四边形、菱形、三角形，您至少需要 2 个）。

另外，遗憾的是 CSS 不允许使用 % 边框，但我认为这个例子是

你也可以反过来做，把你的 img div 放在 Clipper div 里面；只是最适合的问题...

body, html { 
  /* necessary for sizing children in % */
  width: 100%;
  height: 100%;
}
#tobeClipped {
  width: 80%;
  height: 40%;
  position: relative;
  background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
  background-size: cover;
}
#tobeClipped>div {
  position: absolute;
}
#clippers {
  width: 100%;
  height: 100%;
  border: 20px solid grey;
  border-left-width: 100px;
  box-sizing: border-box;
}

<div id="tobeClipped">
    <div id="clippers"></div>
</div>

如果这根本不是您想要的，请澄清一下。

Answer 2

clip-pathCSS 属性可以应用于所有 HTML 元素、SVG 图形元素和 SVG 容器元素：http : //www.html5rocks.com/en/tutorials/masking/adobe/