Как с помощью CSS произвести затемнение картинки?
>
Необходимо произвести затемнение картинки как показано на примере, какие есть возможность для реализации данной идеи?
Из
в
- Вопрос задан более трёх лет назад
- 72765 просмотров
2 комментария
Простой 2 комментария
Сергей delphinpro @delphinpro Куратор тега CSS
1. Наложить поверх картинки полупрозрачный элемент нужного цвета.
2. Задать фон нужного цвета блоку под картинкой, а самой картинки необходимую прозрачность opacity
Затемнение изображения и фона с помощью CSS
Несколько примеров как затемнить изображение в свойстве background и теге .
Затемнение
Первый способ затемнить img
Сделать тёмный фон под изображением , а самому изображению добавить прозрачность с помощью opacity .
.image < background: #000; >.image img
Пример:
Второй способ затемнить img
CSS фильтр Фильтр brightness у .
.image img
Пример:
Третий способ затемнить img
Полупрозрачный элемент над .
Пример:
.image < position: relative; >.image-filter
Пример:
Затемнение фона background
Если картинка задана через свойство background , то есть два способа ее затемнить:
Первый способ затемнить background
Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6 .
.image < position: relative; height: 420px; width: 100%; background: url(/image.jpeg) 0px 0px no-repeat; background-size: cover; >.image:before
Как затемнить изображение на css?
Как слегка затемнить изображение как в примере? И реально ли так сделать на CSS?
- Вопрос задан более трёх лет назад
- 48780 просмотров
Комментировать
Решения вопроса 1
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 4
HTML CSS JS
Самый поддерживаемый способ — наложить поверх блок с черным фоном и необходимой прозрачностью, все остальные способы не такие кроссбраузерные или полезные, например использование inset-теней до сих пор в некоторых браузерах вызывает сильные тормоза. Если вы заботитесь о своих посетителях, а баннер не будет меняться каждый день, делайте такие эффекты сразу в фотошоп, единоразово или создав шаблон (мокап) с этой подложкой на будущее.
Ответ написан более трёх лет назад
Нравится 4 5 комментариев
Я бы картинку положил поверх черного дива и сделал её прозрачность.
В браузерах, где вдруг не работает opacity (хотя rgba() и работает почти везде), хотя бы не было черного дива на странице.
Как сделать затемнение фона (картинки) на 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
Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.