Question

例如

=======

如果我将div（矩形）放在任何其他元素（比如图像）上。图像应该只能通过该div（矩形）内的圆圈可见。

Answer 1

正如穆罕默德评论你的问题有点模糊（而且格式不是很好），但听起来你是在使用.rectangle { background-image: url(yourimage.jpg); border-radius: 100px; width: 100px; height: 100px; } css规则剪辑“掩码”层之后？

这是一个展示CSS剪辑路径的代码集 - http://codepen.io/chriscoyier/pen/02e4ebad4c8d3beeb0dc4781a811a37c

接下来是相应的文章 - https://css-tricks.com/clipping-masking-css/

我能想到的对你的问题的唯一解释是div上的基本边界半径规则，溢出设置为隐藏。

.rectangle {
   position: relative;
}
.rectangle:after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate3d(-50%,-50%,0);
   width: 30px;
   height: 30px;
   border-radius: 30px;
   background-image: url(yourimage.jpg);
   background-size: 200px 100px;
}

编辑：正如您现在在评论部分中表达了您的意图。您可以通过在div元素上使用伪元素来实现剪贴蒙版，如下所示：

{{1}}

如何使用纯CSS在div（矩形）内创建透明圆？

1 个答案: