Затемнение изображения и фона с помощью 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
Сразу оговоримся, что решить такую задачу, как затемнение фона для картинки, можно различными способами. Нет какого-то одного правильного метода. Вы делаете так, как вам удобно и как лучше подходит для вашего конкретного случая.
Для начала пропишем 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
Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.
Затемнение/засветление у разных объектов в одном блоке
Как затемнить или засветлить фон так, чтобы при этом текст, который находится на фоне, не подлежал изменению?
Отслеживать
задан 10 апр 2016 в 5:26
183 2 2 золотых знака 3 3 серебряных знака 7 7 бронзовых знаков
Вынесите блок с текстом за пределы блока с фоном. Тогда opacity не будет на него действовать.
10 апр 2016 в 5:37
Добавьте код этого элемента, иначе вам никто не сможет помочь
11 апр 2016 в 13:31
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
1. Если речь идет о том случае, когда фон — это изображение, то прозрачность влияет на весь элемент, включая его содержание, и нет никакого способа изменить это поведение. Вы можете обойти эту проблему двумя следующими способами:
«Запасной» ДИВ
Добавьте еще один элемент DIV в контейнер для хранения фона. Это самый кроссбраузерный дружественный метод и будет работать даже на IE6.
I am a transparent image .myDiv < position: relative; z-index: 5; height: 300px; width: 700px; color: #000; font-size: 400%; padding: 20px; margin-top: 40px; font-family: Arial; text-transform: capitalize; >.myDiv .bg < position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #ccc url('https://images.unsplash.com/photo-1436564989038-18b9958df72b?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375') center center; opacity: .4; width: 100%; height: 100%; >Псевдоэлементы :before и ::before
Можно добавить псевдоэлемент, у которого будет добавлен фон и прозрачность.
.container < width: 700px; max-width: 100%; height: 200px; display: block; position: relative; >.container:before < content: ""; background: green url('https://images.unsplash.com/photo-1438755582627-221038b62986?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375') 0 0 no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; >.sign < position: absolute; top: 50%; left: 50%; margin-left: -124px; transform: translateY(-50%); >.sign pFree Beautiful Photo
Дополнительные замечания
Из-за поведения z-index вам придется установить z-index для контейнера, а также отрицательный z-index для фонового изображения.
Ответ на этот вопрос уже давался на stackoverflow на английском. Там же есть код и ссылки на jsfiddle. Ссылка на ответ
2. Если речь идет о случае, когда фон — это просто какой-либо цвет, прозрачность которого нужно изменить то используйте CSS-свойство backround-color: rgba(0, 0, 0, 0.5);
CSS затемнение картинки или фона
Затемнение в работе сайтов применяется часто. Типичные варианты — при наведении курсора мыши или после показа какого-либо элемента, чтобы подчеркнуть необходимость действий со стороны пользователя.
Содержимое сайта затемнить просто. Этим же способом можно воспользоваться, если потребуется сделать фоновое изображение темнее. А в качестве альтернативы приведу ещё пару вариантов, которые приходилось использовать.
Затемнение всего сайта
Используем очень простой способ. Создаём спец-элемент, после чего применяем к нему стили.
style type="text/css">
#mask background-color:rgba(0,0,0,.3);
height:100%;
position:fixed;
width:100%;
top:0;
left:0;
>
style>
div id="mask">div>Код безусловно приводит к выводу полупрозрачного прямоугольника на активное окно. Обычно этого не требуется, поэтому задаётся дополнительное свойство display:none; , чтобы изначально элемент был скрыт. В ходе каких-либо действий пользователя элемент показается и/или скрывается. Манипуляции производятся с помощью JavaScript или библиотеки jQuery, как в примере ниже. Для этого на элемент, вызывающий «маску», вешаем событие:
onclick="jQuery('#mask').show()"а на саму маску:
onclick="jQuery('#mask').hide()"полный код (по аналогии легко сделаете для показа):
При этом, нужно помнить про css свойство z-index , когда выводите блок со свойством position , которое установлено в absolute или fixed . Большее значение располагает элемент выше, и наоборот.
Затемнение элемента при наведении
В простейшем случае, затемнение можно рассматривать как способ снятия полупрозрачности. Попробуем это сделать:
style type="text/css">
img opacity:.25; >
img:hover opacity:1; >
style>Изначально блёклая картинка при наведении курсора приобретает резкость.
Если фон тёмный, а изображение светлое, меняем «последовательность»: сначала элемент показываем, как есть, а при наведении курсора добавляем прозрачность.
Честное затемнение элемента
Предыдущие способы не всегда удобны — первый требует наличия дополнительного элемента и его абсолютного позиционирования по границам предка, второй действует на всё содержимое контейнера, что иногда недопустимо.
Например, есть блок с фоновым изображением. В нём — блок с текстом.
Нужно затенить фон, при этом не трогать текст. Как узнали ранее, свойство opacity не подходит. Внесение изменений в код тоже не всегда допустимо. Чтобы не было сомнения, добавляем прозрачности:
Плашка с текстом поблекла. Явно не то, что ожидаем.
Первый способ решить проблему — с помощью дополнительного элемента. Главное, не забыть про z-index , чтобы плашка с текстом всегда оставалась на переднем плане.
Самый лёгкий вариант (исключая затемнение в редакторе и заливки изменённой картинки на сервер) — добавить свойство box-shadow с включенным значением inset, выводящем тень «внутрь» элемента.
В CSS это выглядит так (добавить для блока-родителя плашки):
box-shadow:0 0 0 128px rgba(0, 0, 0, 0.33) inset;
Где 128px — половина высоты элемента. Если высота блока больше, чем ширина, то задавайте половину высоты. Чтобы не путаться, просто запомните: нужна половина от большего измерения.
Кстати, цвета тени смешиваются с фоном, что даёт забавный эффект:
box-shadow:0 0 0 128px rgba(0, 0, 153, 0.33) inset;
Поддержка сайта
С удовольствием создаю годный контент. Буду очень признателен, если вы поддержите мои усилия:
Свежим хлебушком типа батон —> 
днём интернета 
шоколадкой для работы мозга 
коробочкой ароматного чая для бодрости продлением домена —> 
продлением хостинга на +1 месяц