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

Question

例子

=======

如果我将 div（矩形）放在任何其他元素（比如图像）上。图像应该只能通过 div(rectangle).

内部的圆圈可见

Answer 1

正如 Muhammad 评论的那样，您的问题有点含糊（而且格式不是很好），但听起来您是在使用 clip-path css 剪裁 "mask" 图层之后规则？

这是一个展示 CSS 剪辑路径的依赖关系 - http://codepen.io/chriscoyier/pen/02e4ebad4c8d3beeb0dc4781a811a37c

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

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

.rectangle {
  background-image: url(yourimage.jpg);
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

编辑：您现在已经在评论部分表达了您的意图。您可以通过在 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;
}

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

how can I create a transparent circle inside a div(rectangle) using pure css?

css

css-shapes