如何在CSS中制作一个反向透明的圆形

Question

我该如何使用CSS使带颜色背景的区域变为透明？ 以下是一个带背景图的示例： 我还没有尝试过任何方法，因为我不知道该怎么做，请帮帮我。 如果我将它作为div放在另一个div中，并在CSS中输入：

.Xclass{ background: transparent; }

它仍然显示白色背景。

请大家帮帮我。

- user3710700

---

你能贴上更多的代码吗？HTML结构以及父级div的CSS会有所帮助。 - pimmey

你的部分在哪里？我在HTML中找不到任何Xclass类。 - Bonomi

尝试将.Xclass的背景与主要背景匹配。否则，您可以查看CSS遮罩：http://www.hongkiat.com/blog/css-masking/ - Rvervuurt

background: transparent 无法影响父容器的背景。您可以创建一个带有透明圆形的背景图像。 - pimmey

Answer 1

jsBin演示

• 放置一个 没有背景 的 正方形，并设置 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>

- Roko C. Buljan

---

虽然这并不重要，但你可以使用伪元素代替“#circle” div，以减少一些HTML。+1 - Paulie_D

太棒了！你能解释一下为什么会这样吗？为什么overflow: hidden会导致任何box-shadow属性被裁剪？ - Luke Knepper

@LukeKnepper 没错。内部圆的盒子阴影将被 overflow:hidden 的父元素裁剪。 - Roko C. Buljan

Answer 2

尝试

.Xclass {
  opacity: 0.7;
}

或者

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

- aemonge