jquery - 仅通过圆心查看背景颜色

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进行测试。

预期输出:

越来越近

..using a radial gradient. The only thing left now is to keep the circle shape while the div height and width are 100%.

jsFiddle

更新2

This IS what I want to achieve but not how I imagined I would achieve it...is there a better way of obtaining this?

Answer 1

这里有点hack..只是给圆圈添加了一个巨大的边框..然后把它放在#background div..

这是更新的 fiddle :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>