仅通过圆心来查看背景颜色

Question

我有一个黄色背景和一个没有背景颜色但带有灰色边框的圆圈。如果我希望那个圆圈外的所有东西都是白色的，除了圆圈里面的所有东西，你可以看到它下方div的黄色背景，我该怎么办？

我不需要解决方法来用图像替换css圈。我需要找出一个CSS，如果需要JS soulution。

HTML

<div id="background">
    <div class="circle">
    </div>
</div>

CSS

#background{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#ffff99;
    white-space: nowrap;
    text-align:center;
}
#background:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.circle{
    width:100px;
    height:100px;
    position:relative;
    border-radius:50%;
    border:2px solid #999;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

jsFiddle进行测试。

预期产量：

越来越近了

  

..使用径向渐变。现在唯一剩下的就是保持   圆形，而div高度和宽度均为100％。

jsFiddle

更新2

  

这是我想要实现的目标，但不是我想象的那样   它...有更好的方式获得this吗？

Answer 1

尝试使用.circle创建z-Index的父元素，将.circle background设为transparent !important

`background:transparent;`

#background{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#000;
    white-space: nowrap;
    text-align:center;
    z-Index:0;
}
#background:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrap {
    left:40%;
    top:100px;
    position:absolute;
    z-Index:10;
    background:#fff !important;
    width:100px;
    height:100px;
    border-radius:50%;
}
.circle{
    top:-2px;
    left:-2px;
    width:100px;
    height:100px;
    position:absolute;
    border-radius:50%;
    border:2px solid #999;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background:transparent !important;
}

<div id="background">
    <div class="wrap">
        abc
    <div class="circle">
    </div>
    </div>
</div>

jsfiddle http://jsfiddle.net/n3c1t0ee/3/

Answer 2

这就是我想出来的，我使用透明radial-gradient来制作洞并使用pointer-events: none来确保您可以选择图层下方的内容。然后我在div的中间对齐文本。看看：

.background {
  width: 600px;
  height: 600px;
  background: deepskyblue;
}
.circle {
  width: inherit;
  height: inherit;
  background: -moz-radial-gradient(transparent 100px, rgba(0, 0, 0, 1) 100px);
  background: -webkit-radial-gradient(transparent 100px, rgba(0, 0, 0, 1) 100px);
  background: -ms-radial-gradient(transparent 100px, rgba(0, 0, 0, 1) 100px);
  background: -o-radial-gradient(transparent 100px, rgba(0, 0, 0, 1) 100px);
  pointer-events: none;
  display: table;
}
.circle p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="background">
  <div class="circle">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

Answer 3

这里有点黑客..只是在圆圈上添加了一个巨大的边框..然后将它放在#background div内..

以下是更新后的小提琴：http://jsfiddle.net/jormaechea/n3c1t0ee/6/

＆＃13;

＆＃13;

#background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffff99;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
}
#background:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.circle {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  border: 1000px solid #999;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  position: relative;
  left: -900px;
  top: -900px;
}

＆＃13;

<div id="background">
  <div class="circle">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我在圆圈上添加了一个白色阴影

box-shadow: 0px 0px 0px 1000px white;

＆＃13;

＆＃13;

#background{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#ffff99;
    white-space: nowrap;
	text-align:center;
}
#background:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.circle{
    width:100px;
    height:100px;
    position:relative;
    border-radius:50%;
    border:2px solid #999;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    box-shadow: 0px 0px 0px 1000px white;
}

＆＃13;

<div id="background">
    <div class="circle">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;