Полупрозрачный градиент поверх картинки

Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с градиентом и полупрозрачностью opacity.

Вариации градиентов можно посмотреть в статье «Сборник градиентов».

13.02.2019 , обновлено 25.10.2019

Комментарии

, чтобы добавить комментарий.

Другие публикации

Выравнивание блока по центру родителя
Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.
11.10.2019
1730
+1
CSS фильтры
CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы.
18.04.2020
345
0
Наложение градиента на изображение
Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус...
31.08.2018
726
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
4679
+7
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
05.11.2017
48557
+3
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
22.04.2020
1524
+1