Затемнение изображения и фона с помощью CSS

Несколько примеров как затемнить изображение в свойстве background и теге <img>.

Первый способ затемнить img

Сделать тёмный фон под изображением <img>, а самому изображению добавить прозрачность с помощью opacity.

<div class="image">
	<img src="/image.jpeg" alt="">
	<div class="image-text">Затемнение фона</div>
</div>
HTML
.image {
	background: #000;
}
.image img {
	opacity: 0.6;
}
CSS

Пример:

Второй способ затемнить img

CSS фильтр Фильтр brightness у <img>.

<div class="image">
	<img src="/image.jpeg" alt="">
</div>
HTML
.image img {
	filter: brightness(40%)
}
CSS

Пример:

Третий способ затемнить img

Полупрозрачный элемент над <img>.

<div class="image">
	<img src="/image.jpeg" alt="">
	<div class="image-filter"></div>
</div>
HTML

Пример:

.image {
	position: relative;
}
.image-filter {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.6;
}
CSS

Пример:

Если картинка задана через свойство background, то есть два способа ее затемнить:

Первый способ затемнить background

Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6.

<div class="image">
	<div class="image-text">Затемнение фона</div>
</div>
HTML
.image {
	position: relative;
	height: 420px;
	width: 100%;
	background: url(/image.jpeg) 0px 0px no-repeat;
	background-size: cover;
}
.image:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color:rgba(0, 0, 0, .5);
}
CSS

Пример:

Второй способ затемнить background

Использовать «Множественные фоны» в background:

<div class="image">
	<div class="image-text">Затемнение фона</div>
</div>
HTML
.image {
	position: relative;
	width: 100%;    
	height: 420px;
	background: 
		linear-gradient(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.8)), 
		url(https://snipp.ru/demo/560/image.jpeg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;    
}
CSS

Пример:

13.11.2021
951
Предыдущая запись Генерация токенов в PHP
Следующая запись Переносы строк и тег BR в PHP

Комментарии

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

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

Как сделать несколько фонов в background
В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они...
3493
+1
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
38709
+4
Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
39359
+10
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
22068
+25
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
19730
+1
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
43857
+18