如何在CSS中制作反透明圆

Question

如何使用 css 使彩色背景部分透明？这是这个背景的例子

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

.Xclass{ background: transparent; }

它仍然向我显示白色背景。

请帮助我。

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>