Понедельник , 23 Январь 2017
Конкурс «Книга за вопрос»
ДомойПубликации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;

Неожиданно?

Поддержать проект

WebMoney

Яндекс.Деньги


Рейтинг: 0

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

1 209
не в сети 2 дня

x64 (aka andi)

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

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

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Авторизация

Регистрация

Пароль не введен

Генерация пароля