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

13.11.2021

98210

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

Затемнение <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, то есть два способа ее затемнить:

Первый способ затемнить 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