В одной из своих статей я писал, как сделать появление текста при наведении на картинку. И там как — раз использовался эффект затемнения заднего фона, чтобы текст на переднем плане хорошо читался. Т. к. темный фон — overlay я часто использую на своих сайтах в качестве подложки в различных блоках, то решил рассмотреть процесс его создания в отдельной статье.
Допустим, у нас есть блок c произвольным бэкграундом, поверх которого нам надо сделать css затемнение фона:
Разметка блока:
На этом все. Надеюсь, что статья была вам полезной! ДЕМО СКАЧАТЬ
Средняя оценка / 5. Количество оценок:
Оценок пока нет. Поставьте оценку первым!
Похожие записи :
Виджет яндекс отзывов на сайт
Если у вас есть компания/фирма/организация и ее профиль в Яндексе с.
Кракозябры на сайте и в php
Наверняка каждый, кто начинал изучать html и php, сталкивался с тем, что при.
Как задать размер шрифта с помощью css свойства font-size
Чтобы задать размер шрифта на сайте с помощью css, необходимо у нужного.
Как выровнять текст по горизонтали и вертикали в блоке div с помощью css
Казалось бы, простая задача: выровнять текст по центру блока div. Присваиваем.
Как сделать css рамку
Всем привет. На связи coderistu.ru. В этой статье мы рассмотрим, как сделать.
Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется. Безусловно, практически везде стоит специальный плагин JQuery, но в этой статье я расскажу, как сделать затемнение фона через CSS, не прибегая к JQuery.
Давайте напишу HTML-код:
Здесь я добавил одну таблицу, в качестве тестового контента, который будет затемнён. А также блок TB_overlay, который и является ключевым, то есть он будет затемнять. Привожу CSS-код:
#TB_overlay background-color: #000; /* Чёрный фон */ height: 100%; /* Высота максимальна */ left: 0; /* Нулевой отступ слева */ opacity: 0.50; /* Степень прозрачности */ position: fixed; /* Фиксированное положение */ top: 0; /* Нулевой отступ сверху */ width: 100%; /* Ширина максимальна */ z-index: 100; /* Заведомо быть НАД другими элементами */ >
Здесь я постарался прокомментировать, но обратите внимание на свойство opacity. Чем выше значение, тем более сильное затемнение. Максимальное значение 1. Фактически, данный способ затемнения фона через CSS очень прост: идёт наложение на весь контент чёрного блока с определённой прозрачностью.
На мой взгляд, данный способ затемнения очень простой и понятный, поэтому он и применяется чаще всего.
Создано 08.02.2012 16:17:12
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov. Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Кнопка: Она выглядит вот так:
Текстовая ссылка: Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 8 ):
Добрый вечер, Михаил. Я скопировала код, но появилась только таблица, без всякого затемнения. Почему?
Попробуйте в других браузерах, если не получится, значит, как-то не так подключили стили.
Михаил, добрый день. Я новичок, и учусь писать ХТМЛ странички. Есть такой вот код, наверное он даже вашего производства:
Пояснения
X
Здесь на месте этого текста ставьте свой текст или html код.
Подскажите пожалуйста, как интегрировать сюда затемнение, чтобы при открытии модального окна все затемнялось кроме самого окна. Перепробовал кучу вариантов с вашим кодом, но получается только затемнение, само окно остается под затемнением
Это убогий код, и он явно не моего производства. Как интегрировать в эту помойку модальное окно — не знаю. Лучше всё написать заново. Если Вы не знаете, как такое написать, то изучайте HTML. Копировать откуда-то чужой да ещё и кривой код — бесполезная затея.
opacity не поддерживается в старых браузерах..так?
Сразу оговоримся, что решить такую задачу, как затемнение фона для картинки, можно различными способами. Нет какого-то одного правильного метода. Вы делаете так, как вам удобно и как лучше подходит для вашего конкретного случая.
Для начала пропишем html для наглядности:
Здесь мы вставили свою картинку внутрь блока с классом item-photo.
Что мы здесь делаем? Мы добавляем через псевдоэлемент :after прозрачный фон поверх блока с классом item-photo.
Обратите внимание на эту строчку
background-color: rgba(0,0,0,0.5);
Здесь мы задаем фон нашему псевдоэлементу. Если бы мы вместо 0.5 прописали бы 1, то картинку полностью покрыл бы черный фон. Вы можете поэкспериментировать и выбрать любое другое число в пределах 0 и 1.
Еще можно задать градиент, вместо простой заливки. То есть, к примеру, чтобы затемнение было к низу картинки. Вот как это можно сделать:
Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.
Видео: Изучение CSS/CSS3 | #6 — Как указать задний фон картинкой CSS
Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется.
Безусловно, практически везде стоит специальный плагин JQuery, но в этой статье я расскажу, как сделать затемнение фона через CSS, не прибегая к JQuery.
Видео: Красивая анимация фона при наведении
Здесь я добавил одну таблицу, в качестве тестового контента, который будет затемнён. А также блок TB_overlay, который и является ключевым, то есть он будет затемнять.
Привожу CSS-код:
background-color:#000- /* Чёрный фон */
height:100%-/* Высота максимальна */
left:0-/* Нулевой отступ слева */
opacity:0.50-/* Степень прозрачности */
position:fixed-/* Фиксированное положение */
top:0-/* Нулевой отступ сверху */
width:100%-/* Ширина максимальна */
z-index:100-/* Заведомо быть НАД другими элементами */
Здесь я постарался прокомментировать, но обратите внимание на свойство opacity. Чем выше значение, тем более сильное затемнение.
Максимальное значение
Фактически, данный способ затемнения фона через CSS очень прост: идёт наложение на весь контент чёрного блока с определённой прозрачностью.
Видео: DangerPro — Изменение отображение картинки при наведении. CSS
На мой взгляд, данный способ затемнения очень простой и понятный, поэтому он и применяется чаще всего.
Затемнение в работе сайтов применяется часто. Типичные варианты — при наведении курсора мыши или после показа какого-либо элемента, чтобы подчеркнуть необходимость действий со стороны пользователя.
Содержимое сайта затемнить просто. Этим же способом можно воспользоваться, если потребуется сделать фоновое изображение темнее. А в качестве альтернативы приведу ещё пару вариантов, которые приходилось использовать.
Затемнение всего сайта
Используем очень простой способ. Создаём спец-элемент, после чего применяем к нему стили.
Код безусловно приводит к выводу полупрозрачного прямоугольника на активное окно. Обычно этого не требуется, поэтому задаётся дополнительное свойство display:none; , чтобы изначально элемент был скрыт. В ходе каких-либо действий пользователя элемент показается и/или скрывается. Манипуляции производятся с помощью JavaScript или библиотеки jQuery, как в примере ниже. Для этого на элемент, вызывающий «маску», вешаем событие:
полный код (по аналогии легко сделаете для показа):
При этом, нужно помнить про css свойство z-index , когда выводите блок со свойством position , которое установлено в absolute или fixed . Большее значение располагает элемент выше, и наоборот.
Затемнение элемента при наведении
В простейшем случае, затемнение можно рассматривать как способ снятия полупрозрачности. Попробуем это сделать:
Изначально блёклая картинка при наведении курсора приобретает резкость.
Если фон тёмный, а изображение светлое, меняем «последовательность»: сначала элемент показываем, как есть, а при наведении курсора добавляем прозрачность.
Честное затемнение элемента
Предыдущие способы не всегда удобны — первый требует наличия дополнительного элемента и его абсолютного позиционирования по границам предка, второй действует на всё содержимое контейнера, что иногда недопустимо.
Например, есть блок с фоновым изображением. В нём — блок с текстом.
Нужно затенить фон, при этом не трогать текст. Как узнали ранее, свойство opacity не подходит. Внесение изменений в код тоже не всегда допустимо. Чтобы не было сомнения, добавляем прозрачности:
Плашка с текстом поблекла. Явно не то, что ожидаем.
Первый способ решить проблему — с помощью дополнительного элемента. Главное, не забыть про z-index , чтобы плашка с текстом всегда оставалась на переднем плане.
Самый лёгкий вариант (исключая затемнение в редакторе и заливки изменённой картинки на сервер) — добавить свойство box-shadow с включенным значением inset, выводящем тень «внутрь» элемента.
В CSS это выглядит так (добавить для блока-родителя плашки):
box-shadow:0 0 0 128px rgba(0, 0, 0, 0.33) inset;
Где 128px — половина высоты элемента. Если высота блока больше, чем ширина, то задавайте половину высоты. Чтобы не путаться, просто запомните: нужна половина от большего измерения.
Кстати, цвета тени смешиваются с фоном, что даёт забавный эффект:
