中心只需要一个圆圈

Question

我只想要中心的一个圆圈而不是周围的圆圈it.And我不想更改当前代码（渐变样式）。我该如何实现？？

 
 #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: #fff; //type in your color between # and ;
  background-position: 50% 100px, 50% 50%;  
  background-size:0 15px, 100px 100px; 
  background-repeat: no-repeat;
}

Answer 2

删除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>

中心只需要一个圆圈

only one circle at center required

css

linear-gradients

radial-gradients