仅通过圆心查看背景颜色

Question

我有一个黄色背景和一个没有背景颜色但带有灰色边框的圆圈。如果我希望那个圆圈之外的所有东西都是白色的，我会怎么做，除了圆圈内部你可以从下面的 div 中看到黄色背景的所有东西？

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

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

这里有点 hack.. 只是在圆圈中添加了一个 巨大 边框.. 然后将其放置在 #background div 内..

这里是更新的小提琴：http://jsfiddle.net/jormaechea/n3c1t0ee/6/

#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;
}

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

Answer 2

尝试为 .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 3

这就是我想出的，我用透明的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 4

我给圆圈加了一个白色阴影

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

#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;
}

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