如何使用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>

Answer 2

您需要为颜色添加透明度，将fill="rgb(177,236,250)"替换为fill="rgba(177,236,250,0.5)"。 0.5 是您颜色的Alpha值，该值从 0 （完全透明）到 1 （不透明）。

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

Answer 3

您可以将rgba用于透明颜色。另外，您可以使用"position:relative;z-index:(order)"来确定哪个会出现在顶部。

 <div class="circle">
            <svg height="360" width="380">
                <circle cx="50" cy="50" r="50"  fill="rgba(177,236,250,.8)" style="position:relative;z-index:1"></circle>
                <circle cx="100" cy="120" r="90"  fill="rgba(177,236,250,.5)" style="position:relative;z-index:4"></circle>
                <circle cx="290" cy="220" r="160"  fill="rgba(177,236,250,.4)" style="position:relative;z-index:3"></circle>
                <circle cx="80" cy="220" r="80"  fill="rgb(177,236,250,.7)" style="position:relative;z-index:2"></circle>
            </svg>
</div>

Answer 4

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

海上这个。