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

Автор: Антон Добролюбов
Категорія: Цікаве;
12.07.2021;
365;
хв читання
Как сделать затемнение фона (картинки) на 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
Поширити
Коментарі

Зараз читають
Рейтинг найбезпечніших країн світу
Переглядів: 794
Кераміка чи порцеляна: в чому різниця та що краще?
Переглядів: 671
Таунхауси в Київській області – Всі переваги
Переглядів: 389
Коли краще продавати квартиру?
Переглядів: 1880
Натяжні та підвісні стелі – порівняння
Переглядів: 538
Рейтинг міст
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
Нові записи
1976 – рік якої тварини?
Переглядів: 157
Інвестиції в нерухомість Дубая: перспективи та ризики
Переглядів: 106
1981 рік якої тварини за китайським календарем
Переглядів: 175
1985 рік якої тварини за китайським календарем
Переглядів: 136
Меблі з натуральної деревини: Ідеї для вашого інтер’єру
Переглядів: 127