Есть текст в блоке. Как сделать чтобы у блока была opacity 0.5, а у текста opacity 1?

Question

[MRcracker]

Есть текст в блоке. Как сделать чтобы у блока была opacity 0.5, а у текста opacity 1

Answer 1

[Александр Шемаханов]

Используйте для блока заливку с альфа-каналом rgba

<div id="block">
  <p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel erat eu risus pharetra lacinia. Morbi consectetur urna vitae ornare fringilla.
  </p>
</div>

#block{
  background:rgba(0,0,0,0.5);  /* 0.5 – 50% непрозрачности */
}
.text {
  color:#fff;
}

Пример на CodePen

Comments

[MRcracker]

Спасибо!