CSS渐变和不透明度

Question

下面是一些用于创建径向渐变图案的css。 我的问题：是否有可能为颜色添加不透明度，给它们带来鬼影效果？可以使用RGBa代替紫色吗？

我尝试了上述内容但无法按预期工作

/* Note the RADIAL */
background: repeating-radial-gradient(
  circle,
  purple,
  purple 10px,
  #4b026f 10px, 
  #4b026f 20px
);

非常感谢， P

Answer 1

您可以在重复的径向渐变中使用RGBa值，但您需要确保设置起点和终点。

尝试更改.bg中的背景颜色，并查看渐变颜色的变化。

.bg {
  background: red;
  height: 500px;
  width: 500px;
}
.gradient {
  width: 500px;
  height: 500px;
  background: repeating-radial-gradient(circle, rgba(128,0,128, 0.5), rgba(128,0,128, 0.5) 10px, rgba(75, 2, 111, 0.5) 10px, rgba(75, 2, 111, 0.5) 20px);
}

<div class="bg">
  <div class="gradient"></div>
</div>

Answer 2

以下行也可用于为div启用不透明度。大多数情况下都可以使用它。

.div_element{
 opacity : 0.9; /*Value can be changed to increase or decrease opacity level*/
 filter : alpha(opacity=90);
}