Перекрытие изображения полупрозрачной цветной заливкой, background css
Множественные фоны в css позволяют создавать многослойные конструкции, составленные из изображений и градиентов.
Типичный пример использования множественного фона выглядит так:
background: url(image-1.png) center no-repeat,
url(image-2.png) center no-repeat;В этом примере мы имеем на фоне две картинки (выше будет первая, image-1.png).
Но что если требуется поверх image-2.png разместить полупрозрачный фон?
Может показаться что стоит сделать так:
background: rgba(255,255,255,0.75),
url(image-2.png) center no-repeat;Однако, это не сработает.
Здесь на выручку придёт линейный градиент.
background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url(image-2.png) center no-repeat;Всё, картинку на фоне прикрывает цветная пелена.
Кстати, а если наоборот, картинка поверх цвета нужна, то никаких хитростей не требуется — просто добавляем background-color после background-image.
background: url(image-2.png) center no-repeat rgba(255, 255, 255, 0.5);