• Главная
>
• HTML/CSS

Наложение градиента на background-image в CSS можно осуществить с помощью свойства background и использования нескольких фоновых изображений. 

В CSS компоновку фона можно настроить с помощью нескольких изображений. Это позволяет нам использовать градиент вместе с обычным фоновым изображением.

Градиент воспринимается браузером как изображение.

Линейный градиент над 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 (полностью непрозрачный).

При использовании этих градиентов со свойством background-image, важно помнить, что порядок имеет значение.

Градиенты или любые другие фоновые изображения, которые необходимо отображать поверх основного изображения, должны указываться в свойстве background перед основным изображением.