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