在 css 中使用 div 作为剪贴蒙版答案

【问题标题】：Using a div as a clipping mask in css在 css 中使用 div 作为剪贴蒙版
【发布时间】：2013-08-16 04:54:56
【问题描述】：

我有一张背景图片，它有 background-size:cover;应用到它，然后叠加一系列 div，我想成为单独的剪贴蒙版。

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

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

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

【问题讨论】：

更新：好的，所以我找到了元素 background-clip: content-box;这在某种程度上可以使 div 成为剪贴蒙版，但这仅在背景图像是 div 的一部分时才有效。这可以扩展以便将背景剪辑应用于父 div 吗？

标签： html css overlay mask clipping

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

在这种情况下，如果可能的话，为什么不简单地将这些 div 附加到需要剪辑的 div 内部，例如 this。对于这个示例，我只使用了一个带有透明背景和边框的 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>

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

【讨论】：