如何在CSS中制作一个反向透明的圆圈[重复]答案

【问题标题】：How to make an inverse transparent circle in CSS [duplicate]如何在CSS中制作一个反向透明的圆圈[重复]
【发布时间】：2014-12-11 15:29:22
【问题描述】：

如何使用 css 使颜色背景透明部分？这是此背景的示例

我仍然没有尝试任何事情，因为我不知道该怎么做，所以请帮助我。如果我将其作为 div 放在 div 上并输入 css：

.Xclass{ background: transparent; }

它仍然显示白色背景。

请帮帮我。

【问题讨论】：

您能再粘贴一些代码吗？ HTML 结构以及父 div 的 CSS 会有所帮助。
你的分区在哪里？我在 html 中找不到任何 Xclass 类。
尝试为.Xclass 提供与主背景相匹配的背景。否则，您可以随时查看 CSS Masking：hongkiat.com/blog/css-masking
background: transparent 不能影响父容器的背景。您可以创建一个带有透明圆圈的背景图像。

标签： css transparent

【解决方案1】：

试试

.Xclass {
  opacity: 0.7;
}

或

.Xclass {
 background-color: rgba(15,15,15,0.7);
}

【讨论】：

【解决方案2】：

jsBin demo

放置一个无背景的overflow:hidden 正方形。
在那个正方形内 - 放一个圆高box-shadow 传播半径

#image{
  position:relative;
  margin:0 auto;
  background: url(http://i.imgur.com/gVcxX9C.png);
  height:500px;
  width:600px;
}
#box{
  position:absolute;
  left:300px;
  top:200px;
  width:200px;
  height:250px;
  overflow:hidden; /* to contain #circle's box-shadow */
}
#circle{
  position:relative;
  margin:30px auto;
  width: 150px;
  height:150px;
  box-shadow: 0 0 0 100px #fff; /* !!! */
  border-radius:50%;
}

  <div id="image">
    <div id="box"><div id="circle"></div></div>
  </div>

【讨论】：

这并不重要，但您可以使用伪元素而不是 '#circle' div 来减少 HTML。 +1
太棒了！你能解释一下为什么会这样吗？为什么overflow: hidden 会导致任何box-shadow 属性被剪裁？
@LukeKnepper 完全正确。内圈的盒子阴影会被overflow:hidden parent裁剪掉。