css - 中心只需要一个圆圈

Question

我只想要中心的一个圆圈而不是围绕它的圆圈。我不想更改当前代码(渐变样式)。我该如何实现？

 
 #bar {
  position: relative;
  height: 200px;
  width: 600px;
  background: linear-gradient(to left, yellow 99.9%, blue 99.9%), radial-gradient(circle at 50% 50%, yellow 50%, transparent 10%);
  background-position: 50% 100px, 50% 50%;  
  background-size:100% 15px, 100px 100px; 
  background-repeat: no-repeat, repeat-x;
}

<div id="bar"></div>

Answer 1

移除repeat-x

#bar {
  position: relative;
  height: 200px;
  width: 600px;
  background: linear-gradient(to left, yellow 99.9%, blue 99.9%), radial-gradient(circle at 50% 50%, yellow 50%, transparent 10%);
  background-position: 50% 100px, 50% 50%;  
  background-size:100% 15px, 100px 100px; 
  background-repeat: no-repeat;
}

<div id="bar"></div>