センターでは1つの円しか必要ありません

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>

Answer 2

あなたは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; 
}