CSS: Как лучше реализовать прозрачный фон блока?

Question

[Discout]

Как лучше реализовать фон блока, как в примере ниже, если учесть, что шаблон будет превращён в тему для WordPress, а картинка в миниатюре и полупрозрачный фон у блока будут одной и той же картинкой? (Заменил миниатюру - поменялся и фон.)

Свойство opacity в css не подходит, как я понял, т.к. прозрачность наследуется всеми внутренними блоками.

Answer 1

[Виталий Киренков]

Картинка слева
Картинка справа.
Над картинкой справа блок, которому задан background-color в формате rgba, то есть например:

.block {
background-color: rgba(0, 0, 0, 0.5);
}

Comments

[Discout]

Спасибо, наверное, самый логичный вариант. Но...как вывести из потока картинки? Чтобы остальной контент "не замечал" картинок, как здесь: codepen.io/Discout/pen/dtouI

[Trow_eu]

@Discout position: absolute

[Discout]

@Trow_eu спасибо!

Answer 2

[Евгений Петров]

прозрачность наследуется всеми внутренними блоками

Конечно же нет. Вы спецификацию-то смотрели?

А в спецификации про цвета написано, что цвет можно описывать сразу в 4-х каналах — rgba(), hsla().

Comments

[Discout]

Что-то значит я делаю не так: codepen.io/Discout/pen/wvLEH

[Евгений Петров]

@Discout вы говорите про background, но сами пишете opacity. Это — вообще разные вещи.

jsfiddle.net/petroveg/kdm571Lj

[Discout]

@Petroveg Большое спасибо. Я ошибся. Не подскажите, через админку WordPress эту картинку также можно будет сменить? Т.е. php код и в css вставлять можно? (только начинаю разбираться с темами WP)

[Евгений Петров]

@Discout ну нет... Вариант с псевдообластями и тонкой настройкой без JS в вашем случае невозможен.
Буду считать, что вы хотите без скриптов. Тогда вот так примерно jsfiddle.net/petroveg/kdm571Lj/3

[Евгений Петров]

@Discout можно добавлять стиль и в один элемент, но тогда стоит забыть о частичной непрозрачности правой картинки. Вот примерно так jsfiddle.net/petroveg/kdm571Lj/5

Плюс — элементов меньше и вставка фона в одном элементе. И да — именно так, 2 раза подряд одно и то же.

[Discout]

@Petroveg Спасибо, очень выручаете) Буду разбираться дальше.

[Евгений Петров]

@Discout хмм... Второй вариант не совсем то — ведь cover берёт общую ширину блока. Нужно ширину второго фона в лоб задавать jsfiddle.net/petroveg/kdm571Lj/6