Затемнение картинки
filter: blur(3px)- filter: brightness(40%)
- filter: contrast(10%)
- filter: grayscale(.75)
- filter: saturate(300%)
- filter: sepia(100%)
- filter: hue-rotate(270deg)
- filter: invert(100%)
- filter: opacity(50%)
- filter: url(#posterize)
- CSS / HTML
- FrontEnd (ФронтЭнд)
Помогла ли вам статья?
Как сделать затемнение фона (картинки) на 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
Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.
Подскажите, как сделать затемнение фона? (полупрозрачным цветом)
Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у 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 серебряных знаков 119 119 бронзовых знаков
Это ответ на ваш вопрос:
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 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 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
Можете хоть зелёной сделать. И ни где ничего не надо менять.
Затемнение изображения и фона с помощью 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