Пятница , 29 Март 2024
ДомойПубликацииCSS затемнение картинки или фона

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()"

полный код (по аналогии легко сделаете для показа):

<div id="mask" onclick="jQuery('#mask').hide()"></div>

Пример:

При этом, нужно помнить про 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;

Неожиданно?

Рейтинг: 0

Автор публикации

2 070
не в сети 11 месяцев

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (13 голосов, в среднем: 4,62 из 5)
Загрузка...

6 комментариев

  1. Спасибо, помогли.

    Рейтинг: 0
  2. >Где 128px — половина высоты элемента.
    А если размеры элемента не известны заранее? Элемент в респонсивной вёрстке может иметь различные размеры, на различных устройствах.

    Рейтинг: 0

Оставить комментарий

Политика конфиденциальности

Наш сайт использует файлы cookies, чтобы улучшить работу и повысить эффективность сайта. Продолжая работу с сайтом, вы соглашаетесь с использованием нами cookies и политикой конфиденциальности.

Принять