Затемнение фонового изображение с помощью CSS
Всем привет, сегодня я вам расскажу как затемнить фоновое изображение с помощью CSS. Это часто нужно сделать с баннером или с шапкой сайта, где есть текст, который должен быть читабелен. И чтобы не затемнять каждое изображение в Photoshop, можно это сделать автоматически с помощью CSS. Здесь всё очень просто. Вот HTML код
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.
А вот CSS
header {
position: relative;
background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
header:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 2;
}
.inner {
position: relative;
z-index: 3;
color: #fff;
text-align: center;
padding: 50px;
}
И вы получите такую картину
Вот так просто можно затемнить фоновое изображение. На этом у меня всё. До новых статей.
Как сделать затемнение фона (картинки) на CSS
Сразу оговоримся, что решить такую задачу, как затемнение фона для картинки, можно различными способами. Нет какого-то одного правильного метода. Вы делаете так, как вам удобно и как лучше подходит для вашего конкретного случая.
Для начала пропишем html для наглядности:
Здесь мы вставили свою картинку внутрь блока с классом item-photo.
И дальше перейдем к CSS
.item-photo < position: relative; >.item-photo img < width: 100%; >.item-photo:after
Что мы здесь делаем? Мы добавляем через псевдоэлемент :after прозрачный фон поверх блока с классом item-photo.
Обратите внимание на эту строчку
background-color: rgba(0,0,0,0.5);Здесь мы задаем фон нашему псевдоэлементу. Если бы мы вместо 0.5 прописали бы 1, то картинку полностью покрыл бы черный фон. Вы можете поэкспериментировать и выбрать любое другое число в пределах 0 и 1.
Еще можно задать градиент, вместо простой заливки. То есть, к примеру, чтобы затемнение было к низу картинки. Вот как это можно сделать:
.item-photo < position: relative; >.item-photo img < width: 100%; >.item-photo:after
Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.
Как с помощью CSS произвести затемнение картинки?
>
Необходимо произвести затемнение картинки как показано на примере, какие есть возможность для реализации данной идеи?
Из
в
- Вопрос задан более трёх лет назад
- 72812 просмотров
2 комментария
Простой 2 комментария
Сергей delphinpro @delphinpro Куратор тега CSS
1. Наложить поверх картинки полупрозрачный элемент нужного цвета.
2. Задать фон нужного цвета блоку под картинкой, а самой картинки необходимую прозрачность opacity
Как затемнить изображение на css?
Как слегка затемнить изображение как в примере? И реально ли так сделать на CSS?
- Вопрос задан более трёх лет назад
- 48810 просмотров
Комментировать
Решения вопроса 1
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 4
HTML CSS JS
Самый поддерживаемый способ — наложить поверх блок с черным фоном и необходимой прозрачностью, все остальные способы не такие кроссбраузерные или полезные, например использование inset-теней до сих пор в некоторых браузерах вызывает сильные тормоза. Если вы заботитесь о своих посетителях, а баннер не будет меняться каждый день, делайте такие эффекты сразу в фотошоп, единоразово или создав шаблон (мокап) с этой подложкой на будущее.
Ответ написан более трёх лет назад
Нравится 4 5 комментариев
Я бы картинку положил поверх черного дива и сделал её прозрачность.
В браузерах, где вдруг не работает opacity (хотя rgba() и работает почти везде), хотя бы не было черного дива на странице.