Наложение градиента на изображение в HTML при помощи CSS

Многие привыкли накладывать градиент на изображение при помощи графического редактора. Но что делать, если градиент нужно изменить? Все верно. Нужно открыть исходник макета в графическом редакторе и изменить градиент. Все проблемы решает использование каскадных таблиц стилей для его изменения.

Я не буду вдаваться в большие подробности и сразу представлю код наложения градиента на изображение при помощи CSS.

<div style="width: 640px;height: 480px;   background: linear-gradient(180deg, rgb(20 47 88 / 0%) 0%, #143458 100%), url(/images/image.jpg) no-repeat center center / cover;"></div>

Результат код на изображении ниже.

Обратите внимание, что изображение накладывается в видео фона (background-image). Выше представлен сокращенный код. Я сразу прописал необходимые спецификации для свойства background.

Итак, у нас имеется контейнер с шириной 640 точек и высотой 480 точек. Мы подгружаем в него изображение, помещаем его в центре и подгоняем под размеры контейнера. Так мы не сильно зависим от размера изображения и можем сделать контейнер адаптивным (если укажем ширину 100%).

linear-gradient(180deg, rgb(20 47 88 / 0%) 0%, #143458 100%

Как раз эта часть CSS отвечает за наложение градиента поверх помещаемого изображения. Единственной сложностью, с которой вы можете столкнуться – это изменение самого градиента в CSS. Но спешу обрадовать, вам не нужно искать сайты с генерацией этих градиентов. Все можно изменить при помощи обычного браузера.

Рассмотрим изменение градиента CSS при помощи Google Chrome.

Итак, наводим на наше изображение с градиентом и нажимаем правой кнопкой мыши.

В контекстном меню выбираем «Просмотреть код».

В появившейся панели справа мы видим CSS код с параметрами вставки изображения.

Наш градиент построен таким образом, чтобы идти он прозрачного к полному затемнению синим цветом.

Для изменения основного цвета нужно нажать кнопкой мыши на темно-синий квадрат, как указано на рисунке.

После появится панель цвета.

Здесь, передвигая ползунки, вы можете поменять цвет, например, на темно-зеленый. В итоге наше изображение в целом измениться.

Здесь также можно перемещать нижний ползунок, он отвечает за прозрачность и установлен по умолчанию на 100%.

Для того, чтобы поменять верхнюю часть градиента CSS на изображении – вам необходимо проделать те же манипуляции, но с первым квадратиком.

В этом случае цвет установлен на полную прозрачность.

Также здесь вы можете изменить угол градиента. Со 180 градусов (вертикального) можно установить любой другой угол.

Например, изменение этого параметра на 90 приведет к тому, что мы получим не вертикальный, а горизонтальный градиент CSS.

Результат:

После того как вы перекрасите и повернете заливку так как вам необходимо, вы должны аккуратно скопировать CSS код из панели редактирования и вставить в свой HTML файл. И все, все изменения будут применены.

Важно! Во время редактирования CSS не обновляете старицу HTML, иначе все ваши изменения будут сброшены и придётся все проделывать заново.