Question

我有一个背景图片的背景图片：封面;适用于它，然后覆盖一系列div，我想成为单独的剪贴蒙版。

我看了一下功能片段：rect（20px，20px，20px，20px，）;但是，由于div是通过CMS系统引入的，因此定义设置大小是不合适的。

有没有办法用剪切蒙版属性设置div，以便在图片上放置div的位置剪辑图像？

我并不特别想使用图像叠加，因为这个网站会有响应。

Answer 1

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

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

另外，遗憾的是CSS不允许％border，但我认为这个例子是

你也可以反过来把你的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-path CSS属性可应用于所有HTML元素，SVG图形元素和SVG容器元素：
http://www.html5rocks.com/en/tutorials/masking/adobe/

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

2 个答案: