Можно ли только одним background сделать перекрытие цвета и картинки?

Question

[Александр Иванов]

вот пример там где блок жёлтый,
codepen.io/Simon1111/pen/PPQjWE
пробовал загрузить png c прозрачностью думал что перекроет.

background-color: red:
background-image: url(/...);

просто не хочется доп див создовать так как тег будет пустой

Comments

[riot26]

>просто не хочется доп див создовать так как тег будет пустой
может, :after или :before?

[Александр Иванов]

riot26: пробовал не прокатило сейчас к этому присматриваюсь: background-blend-mode

Answer 1

[Михаил Чирский]

Как то так?
codepen.io/Mike0609/pen/YyjEyB

Comments

[Александр Иванов]

Нет, на деле должно выглядеть так
codepen.io/Simon1111/pen/avjVZG
только через один bcg а у меня div#bg-glass
создан для перекрытия, поскольку остальные методы не прокатили

[Михаил Чирский]

cimonlebedev: тогда так
codepen.io/Mike0609/pen/VvBrBo

[Михаил Чирский]

у Вас из-за того что вы юзаете bootstrap, ::after, ::before display: table; вот и не прокатывало, добавьте display: block; и все заработает и без лишних div вложенных

[Александр Иванов]

Михаил Чирский: да от bootstrap больше вреда чем пользы ещё

[Михаил Чирский]

cimonlebedev: если вы только изучаете верстку, это нормально, ну если уже знаете хорошо, я не пользуюсь подобными framework, это по сути больше для программистов, чтобы быстро запилить красивую админку, я предпочитаю все свое родное)