我想使用HTML / CSS在图像上的星星后面绘制圆圈。
首先,我创建了一个Js函数来为CSS生成代码:
function setCircle(){
var a = "";
for(var i = 0; i < 360; i += 5){
a += "linear-gradient( " + i + "deg, "+ (i % 10 == 0 && i != 0 ? "green" : "lightgreen") +" 50%, transparent 50% ), ";
}
a += "linear-gradient( 355deg, green 50%, transparent 50% );";
document.write(a);
}
function start(){
setCircle();
}
start();
每个渐变都是半绿色或浅绿色,一半是透明。
然后,我将其放入样式中。
.star_back{
background: linear-gradient( 0deg, lightgreen 50%, transparent 50% ), linear-gradient( 5deg, lightgreen 50%, transparent 50% ), linear-gradient( 10deg, green 50%, transparent 50% ), linear-gradient( 15deg, lightgreen 50%, transparent 50% ), linear-gradient( 20deg, green 50%, transparent 50% ), linear-gradient( 25deg, lightgreen 50%, transparent 50% ), linear-gradient( 30deg, green 50%, transparent 50% ), linear-gradient( 35deg, lightgreen 50%, transparent 50% ), linear-gradient( 40deg, green 50%, transparent 50% ), linear-gradient( 45deg, lightgreen 50%, transparent 50% ), linear-gradient( 50deg, green 50%, transparent 50% ), linear-gradient( 55deg, lightgreen 50%, transparent 50% ), linear-gradient( 60deg, green 50%, transparent 50% ), linear-gradient( 65deg, lightgreen 50%, transparent 50% ), linear-gradient( 70deg, green 50%, transparent 50% ), linear-gradient( 75deg, lightgreen 50%, transparent 50% ), linear-gradient( 80deg, green 50%, transparent 50% ), linear-gradient( 85deg, lightgreen 50%, transparent 50% ), linear-gradient( 90deg, green 50%, transparent 50% ), linear-gradient( 95deg, lightgreen 50%, transparent 50% ), linear-gradient( 100deg, green 50%, transparent 50% ), linear-gradient( 105deg, lightgreen 50%, transparent 50% ), linear-gradient( 110deg, green 50%, transparent 50% ), linear-gradient( 115deg, lightgreen 50%, transparent 50% ), linear-gradient( 120deg, green 50%, transparent 50% ), linear-gradient( 125deg, lightgreen 50%, transparent 50% ), linear-gradient( 130deg, green 50%, transparent 50% ), linear-gradient( 135deg, lightgreen 50%, transparent 50% ), linear-gradient( 140deg, green 50%, transparent 50% ), linear-gradient( 145deg, lightgreen 50%, transparent 50% ), linear-gradient( 150deg, green 50%, transparent 50% ), linear-gradient( 155deg, lightgreen 50%, transparent 50% ), linear-gradient( 160deg, green 50%, transparent 50% ), linear-gradient( 165deg, lightgreen 50%, transparent 50% ), linear-gradient( 170deg, green 50%, transparent 50% ), linear-gradient( 175deg, lightgreen 50%, transparent 50% ), linear-gradient( 180deg, green 50%, transparent 50% ), linear-gradient( 185deg, lightgreen 50%, transparent 50% ), linear-gradient( 190deg, green 50%, transparent 50% ), linear-gradient( 195deg, lightgreen 50%, transparent 50% ), linear-gradient( 200deg, green 50%, transparent 50% ), linear-gradient( 205deg, lightgreen 50%, transparent 50% ), linear-gradient( 210deg, green 50%, transparent 50% ), linear-gradient( 215deg, lightgreen 50%, transparent 50% ), linear-gradient( 220deg, green 50%, transparent 50% ), linear-gradient( 225deg, lightgreen 50%, transparent 50% ), linear-gradient( 230deg, green 50%, transparent 50% ), linear-gradient( 235deg, lightgreen 50%, transparent 50% ), linear-gradient( 240deg, green 50%, transparent 50% ), linear-gradient( 245deg, lightgreen 50%, transparent 50% ), linear-gradient( 250deg, green 50%, transparent 50% ), linear-gradient( 255deg, lightgreen 50%, transparent 50% ), linear-gradient( 260deg, green 50%, transparent 50% ), linear-gradient( 265deg, lightgreen 50%, transparent 50% ), linear-gradient( 270deg, green 50%, transparent 50% ), linear-gradient( 275deg, lightgreen 50%, transparent 50% ), linear-gradient( 280deg, green 50%, transparent 50% ), linear-gradient( 285deg, lightgreen 50%, transparent 50% ), linear-gradient( 290deg, green 50%, transparent 50% ), linear-gradient( 295deg, lightgreen 50%, transparent 50% ), linear-gradient( 300deg, green 50%, transparent 50% ), linear-gradient( 305deg, lightgreen 50%, transparent 50% ), linear-gradient( 310deg, green 50%, transparent 50% ), linear-gradient( 315deg, lightgreen 50%, transparent 50% ), linear-gradient( 320deg, green 50%, transparent 50% ), linear-gradient( 325deg, lightgreen 50%, transparent 50% ), linear-gradient( 330deg, green 50%, transparent 50% ), linear-gradient( 335deg, lightgreen 50%, transparent 50% ), linear-gradient( 340deg, green 50%, transparent 50% ), linear-gradient( 345deg, lightgreen 50%, transparent 50% ), linear-gradient( 350deg, green 50%, transparent 50% ), linear-gradient( 355deg, lightgreen 50%, transparent 50% ), linear-gradient( 355deg, green 50%, transparent 50% );
border-radius: 50%;
margin: 0 auto;
width: 300px; height: 300px;
}
<div class="star_back"></div>
在这里我停了下来。问题在于我的渐变只能绘制圆的一半,因为每个新的渐变都会覆盖另一个圆。我该如何更改它才能起作用?如果我不能使用渐变来做到这一点,那么最简单的方法是什么?