Текст в полупрозрачных блоках

Question

[bezbunix]

Появилась необходимость сделать сайт с фоновой фоткой. И тут в бой идут полупрозрачные блоки.
И собственно вопрос:
Когда блоку ставится прозрачность, текст внутри тоже становится той же прозрачности.
Так избежать этого? сделать нормальной видимости?

Answer 1

[Сергей Протько]

делать полупрозрачным только фон

/* 50% черного */
background-color: rgba(0, 0, 0, 0.5);

Comments

[bezbunix]

Спасибо, то, что нужно.

Answer 2

[Сергей Ларионов]

А если фон захочется посложнее, чем однородный цвет или простой градиент?
Предложу альтернативный способ. Подложить под блок его же :after элемент, и для него уже задать прозрачность.
<div class="myblock"></div>

.myblock {
 position: relative;
}

.myblock:after {
 content: '';
 position: absolute;
 top: 0; bottom: 0; right: 0; left: 0;
 background: red;
 opacity: 0.5;
}

Само собой разумеется, если нужен лишь простой полупрозрачный фон, то решение @Fesor оптимальнее.