Затемнение изображения и фона с помощью 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 произвести затемнение картинки?
>
Необходимо произвести затемнение картинки как показано на примере, какие есть возможность для реализации данной идеи?
Из
в
- Вопрос задан более трёх лет назад
- 73237 просмотров
2 комментария
Простой 2 комментария
Сергей delphinpro @delphinpro Куратор тега CSS
1. Наложить поверх картинки полупрозрачный элемент нужного цвета.
2. Задать фон нужного цвета блоку под картинкой, а самой картинки необходимую прозрачность opacity
Как затемнить изображение на css?
Как слегка затемнить изображение как в примере? И реально ли так сделать на CSS?
- Вопрос задан более трёх лет назад
- 49023 просмотра
Комментировать
Решения вопроса 1
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 4
HTML CSS JS
Самый поддерживаемый способ — наложить поверх блок с черным фоном и необходимой прозрачностью, все остальные способы не такие кроссбраузерные или полезные, например использование inset-теней до сих пор в некоторых браузерах вызывает сильные тормоза. Если вы заботитесь о своих посетителях, а баннер не будет меняться каждый день, делайте такие эффекты сразу в фотошоп, единоразово или создав шаблон (мокап) с этой подложкой на будущее.
Ответ написан более трёх лет назад
Нравится 4 5 комментариев
Я бы картинку положил поверх черного дива и сделал её прозрачность.
В браузерах, где вдруг не работает opacity (хотя rgba() и работает почти везде), хотя бы не было черного дива на странице.
Подскажите, как сделать затемнение фона? (полупрозрачным цветом)
Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у 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 11 11 золотых знаков 59 59 серебряных знаков 121 121 бронзовый знак
Это ответ на ваш вопрос:
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 204 204 золотых знака 67 67 серебряных знаков 251 251 бронзовый знак
ответ дан 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
317 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
Можете хоть зелёной сделать. И ни где ничего не надо менять.