使用div作为CSS中的剪贴蒙版

Question

我的背景图片具有background-size：cover; 应用到它，然后一系列的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>

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