如何使用纯 css 在 div（矩形）内创建一个透明圆圈？ [复制]答案

【问题标题】：how can I create a transparent circle inside a div(rectangle) using pure css? [duplicate]如何使用纯 css 在 div（矩形）内创建一个透明圆圈？ [复制]
【发布时间】：2017-03-14 06:24:19
【问题描述】：

示例

=======

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

【问题讨论】：

你能详细说明你到底想要什么吗？现在你的问题是模棱两可的。
我想在矩形中心的矩形（200px*100px）内创建一个透明圆（r=30px）。

标签： css css-shapes

【解决方案1】：

正如 Muhammad 评论的那样，您的问题有点含糊（而且格式不是很好），但听起来您正在使用 clip-path css 规则剪切“蒙版”层？

这是一个展示 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;
}

编辑：正如您现在在 cmets 部分中陈述的那样。您可以通过在 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;
}

【讨论】：

你能简单解释一下吗！
你的意思是溢出隐藏解决方案还是剪辑路径解决方案？ :after 规则创建了一个伪元素，我们可以相对于父元素进行绝对定位。伪元素是它们自己。然后，我们将背景设置为与 .rectangle div 相同的大小，同时只显示一个 30px 的圆圈。