html - CSS渐变和不透明度

Question

下面是一些用于创建径向渐变图案的 css。我的问题：是否可以为颜色添加不透明度，使其具有类似鬼魂的效果？可以使用 RGBa 代替 Purple 吗？

我尝试了上述方法，但无法按预期工作

/* 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);
}