Как с помощью CSS произвести затемнение картинки?
>
Необходимо произвести затемнение картинки как показано на примере, какие есть возможность для реализации данной идеи?
Из
в
- Вопрос задан более трёх лет назад
- 72762 просмотра
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
Затенение картинки при наведении
Вполне можно обойтись одним изображением, уменьшая при наведении значение свойства opacity .
Но для достижения требуемого эффекта «затемнения», картинку следует поместить в контейнер вида inline-block с темным фоном и нулевой высотой строки.
Если же мы хотим оставить насыщенность картинки неизменной, а при наведении затемнить только нижнюю часть изображения, то надо создать блок с фоновой картинкой, а в него поместить блок с градиентой заливкой и нулевым значением свойства opacity , которое увеличивать принаведении.
В результате при наведении курсора мыши первая картинка будет становиться светлее, вторая будет затемняться, а у третьей появится тень в нижней части:
Исходный код этого примера:
.dark < display: inline-block; background-color: rgba(0, 0, 0, 0.5); line-height: 0; >.img < display: inline-block; background: url("/java/ann.jpg"); width: 100px; height: 147px; >.gradient < display: inline-block; background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.75)); width: 100px; height: 147px; opacity: 0; >img:hover, .gradient:hover Такой метод можно использовать для всех картинок на странице, для которых вы пожелаете применить эффект «затемнения».
Подскажите, как сделать затемнение фона? (полупрозрачным цветом)
Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у header есть картинка на фоне, а поверх нее текст. Но чтобы текст читался, поверх картинки накладывается полупрозрачный черный например фон. Как его сделать? Для header имеются такие свойства:
header < height: 538px; width: 100%; background: url(../img/header-bg.png) no-repeat center center; background-size: cover; >Отслеживать
user212578
задан 3 мая 2017 в 8:19
PolonskiyP PolonskiyP
239 2 2 золотых знака 5 5 серебряных знаков 13 13 бронзовых знаков
Возможный дубликат вопроса: как исключить применение стиля к дочерним селекторам CSS
12 фев 2018 в 19:04
8 ответов 8
Сортировка: Сброс на вариант по умолчанию
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
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi. Отслеживать
ответ дан 3 мая 2017 в 12:28
22.4k 10 10 золотых знаков 56 56 серебряных знаков 120 120 бронзовых знаков
Это ответ на ваш вопрос:
background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.5) ), url('/img/back/home-back.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; Отслеживать
51.6k 201 201 золотой знак 63 63 серебряных знака 245 245 бронзовых знаков
ответ дан 3 янв 2018 в 16:52
Alisher Aidarkhanov Alisher Aidarkhanov
129 2 2 серебряных знака 7 7 бронзовых знаков
Наложить полупрозрачный блок c rgba бэкграундом (где 4й параметр прозрачность) и с абсолютным позиционированием. HTML:
.header < position: relative; >.cover < background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; bottom: 0; left: 0; right: 0; >.content
Отслеживать
ответ дан 3 мая 2017 в 11:21
307 5 5 серебряных знаков 13 13 бронзовых знаков
отличный простой вариант, но он затемняет и весь остальной контент, и z-index-ом почему-то не регулируется.
3 мая 2017 в 13:19
Отредактировал, думаю так понятней. Мы накладываем блок поверх.
3 мая 2017 в 16:45
Тоже понадобилось такое решение, в итоге не подходили предложения через ::after , position и z-index . В этих случаях нужно все элементы на странице поднимать на позицию выше. Через filter и opacity тоже не вариант, затемняется всё.
Решение простое.
background: url('../img/header/bg.jpg') no-repeat center /cover, #555555; background-blend-mode: hard-light;//или multiply
Можете хоть зелёной сделать. И ни где ничего не надо менять.