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

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

Зараз читають
Поради щодо вибору домофону для квартири
Переглядів: 455
Ваш ідеальний клімат: як вибрати кондиціонер
Переглядів: 163
Як приготувати суші вдома
Переглядів: 605
Доставка ролів в Одесі – ресторан Помодоро
Переглядів: 378
Найпопулярніші польські імена
Переглядів: 378
Рейтинг міст
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
Нові записи
Як вибрати натяжні стелі для оселі
Переглядів: 148
Цікаві факти про банани: де ростуть, як вирощують та багато іншого
Переглядів: 82
Цікаві факти про картину Сікстинська мадонна
Переглядів: 98
Образ та риси характеру Лускунчика
Переглядів: 133
Образ та характеристика Дон Кіхота
Переглядів: 145