Как наложить градиент на background-image
Наложение градиента на background-image в CSS можно осуществить с помощью свойства background и использования нескольких фоновых изображений.
В CSS компоновку фона можно настроить с помощью нескольких изображений. Это позволяет нам использовать градиент вместе с обычным фоновым изображением.
![warning icon](http://local-winkomp-cms.ru/admin/mod/ckeditor422/plugins/castom_div/img/good.png)
Градиент воспринимается браузером как изображение.
Линейный градиент над background-image
В этом примере линейный градиент переходит от черного цвета с полупрозрачностью 0.5 до того же черного цвета. Такой эффект создает затемнение на нашем фоновом изображении 'your-image.jpg'.
.background {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('your-image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Градиент указывается первым в свойстве background, что означает, что градиент будет накладываться поверх фонового изображения. Как правило, браузеры отображают несколько фоновых изображений слоями, начиная с первого и заканчивая последним.
Радиальный градиент над background-image
Также у нас есть возможность использовать радиальный градиент для создания различных визуальных эффектов. Принцип работы с радиальным градиентом практически тот же, что и с линейным градиентом.
.background {
background: radial-gradient(circle, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)),
url('your-image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
В данном примере радиальный градиент начинается с центра в виде круга и идет от черного с 60% прозрачности к полностью прозрачному цвету. Это создает эффект "выцветания" цвета к краям изображения.
Как работают градиенты в CSS
Градиенты в CSS работают, создавая плавный переход между двумя или более цветами. Линейный градиент следует прямой линии, в то время как радиальный градиент идет от одной точки (обычно центра) до крайних точек области.
Прозрачность в этих градиентах задается последним параметром функции rgba() и может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный).
![warning icon](http://local-winkomp-cms.ru/admin/mod/ckeditor422/plugins/castom_div/img/warning.png)
При использовании этих градиентов со свойством background-image, важно помнить, что порядок имеет значение.
Градиенты или любые другие фоновые изображения, которые необходимо отображать поверх основного изображения, должны указываться в свойстве background перед основным изображением.