如何用这样的html和css绘制圆圈？

Question

到目前为止,我一直试图在这里绘制这个圆圈.

 <div class="circle">
      <svg height="360" width="380">
           <circle cx="50" cy="50" r="50"  fill="rgb(177,236,250"></circle>
           <circle cx="100" cy="120" r="90"  fill="rgb(177,236,250)" ></circle>
           <circle cx="290" cy="220" r="160"  fill="rgb(177,236,250)"></circle>
           <circle cx="80" cy="220" r="80"  fill="rgb(177,236,250)"></circle>
      </svg>
</div>

但它看起来如此不同.

Answer 1

您需要使用rgba而不是RGB来设置透明度:

<div class="circle">
      <svg height="360" width="380">
           <circle cx="50" cy="50" r="50"  fill="rgba(177,236,250,0.5)"></circle>
           <circle cx="100" cy="120" r="90"  fill="rgba(177,236,250,0.5)" ></circle>
           <circle cx="290" cy="220" r="160"  fill="rgba(177,236,250,0.5)"></circle>
           <circle cx="80" cy="220" r="80"  fill="rgba(177,236,250,0.5)"></circle>
     </svg>
</div>