Как сделать затемнение фона (картинки) на CSS

Автор: Антон Добролюбов
Категорія: Цікаве;
12.07.2021;
452;
хв читання
Как сделать затемнение фона (картинки) на CSS
Зміст:

CSS (Cascading Style Sheets) является языком стилизации веб-страниц и позволяет веб-разработчикам создавать удивительные эффекты и дизайн. Одним из таких эффектов является затемнение фона или картинки. Затемнение фона может использоваться для повышения контрастности текста или создания эффекта наложения элементов на изображение. В этом тексте мы рассмотрим различные способы создания затемнения фона на CSS.

Использование свойства background-color

Простейшим способом создания затемнения фона является использование свойства background-color для элемента. Мы можем установить прозрачность фона, чтобы добиться нужного эффекта.

.element {
  background-color: rgba(0, 0, 0, 0.5);
}

В данном примере мы установили цвет фона черным (rgba(0, 0, 0)), а значение 0.5 определяет прозрачность фона. Чем меньше значение прозрачности, тем более затемненным будет фон. Значение 0 означает полную прозрачность, а 1 – полную непрозрачность.

Использование псевдоэлемента ::before

Другой способ создания затемнения фона – использование псевдоэлемента ::before. Псевдоэлементы позволяют добавить дополнительные элементы на страницу без необходимости изменять HTML-структуру.

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

В данном примере мы создаем псевдоэлемент ::before, который полностью занимает место родительского элемента и имеет тот же цвет фона и прозрачность. Установленное значение z-index: -1 позволяет поместить псевдоэлемент под основной контент, чтобы он не перекрывал другие элементы на странице.

Использование фильтра CSS

CSS также предоставляет нам возможность использовать фильтры для изменения внешнего вида элементов. Фильтр brightness может быть использован для затемнения фона.

.element {
  background-image: url('background.jpg');
  filter: brightness(0.5);
}

В данном примере мы устанавливаем изображение в качестве фона элемента с помощью свойства background-image и применяем фильтр brightness со значением 0.5, что делает изображение более темным. Чем меньше значение brightness, тем более затемненным станет фон.

Заключение

В этом тексте мы рассмотрели несколько способов создания затемнения фона (картинки) на CSS. Мы узнали, как использовать свойство background-color для установки прозрачности фона, псевдоэлемент ::before для создания дополнительного слоя затемнения и фильтр brightness для изменения яркости фона. Вы можете выбрать подходящий способ в зависимости от ваших потребностей и требуемого дизайна.

Оцініть статтю
0
0
Поширити
Коментарі

Зараз читають
Популярні китайські імена та їх значення
Переглядів: 341
Чому варто обрати приватну школу FSOT для своєї дитини
Переглядів: 477
Королівський пекінес: чим відрізняється від звичайного?
Переглядів: 343
Скільки років живе німецький дог
Переглядів: 833
Як краще спати при сколіозі
Переглядів: 1208
Рейтинг міст
1
Чернігів
85 / 100
2
Львів
84 / 100
3
Вінниця
83 / 100
4
Харків
82 / 100
5
Чернівці
79 / 100
6
Тернопіль
79 / 100
7
Київ
78 / 100
8
Полтава
72 / 100
9
Житомир
72 / 100
10
Запоріжжя
72 / 100
11
Рівне
70 / 100
12
Луцьк
69 / 100
13
Кропивницький
69 / 100
14
Миколаїв
69 / 100
15
Хмельницький
67 / 100
16
Дніпро
63 / 100
17
Одеса
60 / 100
Нові записи
Виробництво меблів: сучасні тенденції та технології
Переглядів: 129
Хто такий скуф?
Переглядів: 181
Класичний рецепт желейного десерту “Бите скло”
Переглядів: 172
Як обрати ідеальну шафу-купе для свого житла від Shkaf.biz.ua
Переглядів: 145
Ком-Форт: Кращі рішення для облаштування дому
Переглядів: 138