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

问题描述

我有一个背景图片，其背景大小为:cover;应用于它，然后覆盖一系列div，我想成为各个剪贴蒙版.

I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.

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

I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.

有没有一种方法可以通过设置带有剪贴蒙版属性的div来将图像剪切到div放置在页面上的任何地方?

Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?

我也不特别希望使用图像叠加层，因为此站点会响应.

I don't particularly want to use an image overlay either as this site will be responsive.

推荐答案

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

If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?

在这种情况下，如果可能的话，为什么不直接在需要裁剪的div内附加这些div，例如这个.出于此示例目的，我仅使用了一个具有透明背景和边框的div.如果需要将图像裁剪为非矩形形状，则需要更多的div(例如，对于平行四边形，菱形，三角形，至少需要2个).

In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).

此外，遗憾的是CSS不允许使用％边框，但是我认为这个示例是

Also, sadly CSS doesn't allow for % borders, but I think this example is

您也可以采用其他方法，将img div放置在Clipper div中；只是最合适的问题...

You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...

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>

请澄清一下这是否根本不是您想要的东西.

Please do clarify if this was not at all what you were looking for.

这篇关于使用div作为CSS中的剪贴蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！