Как затемнить фон в html
Перейти к содержимому

Как затемнить фон в html

  • автор:

Затемнение фонового изображение с помощью CSS

Всем привет, сегодня я вам расскажу как затемнить фоновое изображение с помощью CSS. Это часто нужно сделать с баннером или с шапкой сайта, где есть текст, который должен быть читабелен. И чтобы не затемнять каждое изображение в Photoshop, можно это сделать автоматически с помощью CSS. Здесь всё очень просто. Вот HTML код



Lorem ipsum dolor.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.

А вот CSS

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 {
position: relative;
z-index: 3;
color: #fff;
text-align: center;
padding: 50px;
}

И вы получите такую картину

Вот так просто можно затемнить фоновое изображение. На этом у меня всё. До новых статей.

Как сделать затемнение фона (картинки) на 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

Затемнение картинки

Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.

Затемнение изображения и фона с помощью 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

Затемнение фона

Сделать полупрозрачный кроссбраузерный фон. Проблем такое сделать нет, если бы не IE6, который не понимает position: fixed. Для решения этой проблемы используем CSS код:

#TB_overlay < position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; background-color: #000; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55); -moz-opacity: 0.55; -khtml-opacity: 0.55; opacity: 0.55; >* html #TB_overlay < position: absolute; height: expression(document.body.scrollHeight >document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + "px"); >

P.S. в примере в качестве фона используется . Для нормальной работы с IE6, нужно использовать iframe, чтобы получилось перекрыть select. Используя библиотеку jQuery можно воспользоваться следующим условием:

if(!jQuery("body").find("#TB_overlay").is("div")) /* если фон уже добавлен не добавляем повторно */ < if(!jQuery.browser.msie) /* если браузер не ИЕ фоном будет div */ jQuery("body").append(" "); else /* иначе добавляем iframe */ jQuery("body").append(" "); >

update by F0rmateg чтоб не использовать iframe для IE6 можно скрывать (display: none) все select при показе фона.

По теме

  • CSS свойство opacity
  • кроссбраузерная CSS прозрачность
  • CSS свойство -moz-opacity
  • Alpha фильтр
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *