Как задать прозрачность у главного и дочернего элемента?

Question

[Sergey]

1) Есть главный блок - я ему задаю background-image: url(images/mybg.png);
2) В нем есть несколько мелких блоков, типа текст

Вопрос: как мне задать прозрачность для фоновой картини главного блока? (opacity), что бы при этом у дочерних элементов прозрачность была обычная.

p.s пытался в лоб: у главного прописал opacity:0.5 а у дочерних opacity 1, но нифига не работает, почему?

Answer 1

[Сергей Зеленский]

потому что дочерние элементы принимают значение прозрачности от родителя, сделайте прозрачной картинку и все

Answer 2

[Андрей Гончаров]

Картинку, которую ты используешь в качестве бекграунда, тебе надо сделать отдельным элементом и с помощью абсолютного позиционирования расположить его под текстовыми блоками. Пример:

img.bg{
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: auto;
opacity: 0.5;
}

.текстовыйблок{
position: relative;
z-index: 2;
}

Либо сделать тоже самое, только картинку вставлять как бекграунд псевдоэлемента родительского блока.

Answer 3

[Web_Questions]

Не обязательно абсолютным.
Абсолютом стоит пользоваться в крайних случаях.
Сделайте так.
Расположите блок с картинкой с нужной высотой шириной и ниже блок с текстом.
Блоку с картиночкой на бэке, задайте прозрачность,
а блоку с текстом задайте отрицательный margin-top
margin-top: -(высота блока с картинкой);
Важно расположить блок с картинкой перед блоком с текстом а не наоборот, или блок с картинкой будет перекрывать ваш текст.
При использовании такого решения отпадает нужда использовании картинки в блоке бэком, можно расположить ее как картинку и все, что тоже плюс.

Answer 4

[GreatRash]

https://css-tricks.com/snippets/css/transparent-ba...