Как сделать затемнение фона в css

Как сделать затемнение фона через CSS

Как сделать затемнение фона через CSS

Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется. Безусловно, практически везде стоит специальный плагин 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 очень прост: идёт наложение на весь контент чёрного блока с определённой прозрачностью.

На мой взгляд, данный способ затемнения очень простой и понятный, поэтому он и применяется чаще всего.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 8 ):

Добрый вечер, Михаил. Я скопировала код, но появилась только таблица, без всякого затемнения. Почему?

Попробуйте в других браузерах, если не получится, значит, как-то не так подключили стили.

Михаил, добрый день. Я новичок, и учусь писать ХТМЛ странички. Есть такой вот код, наверное он даже вашего производства: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=cp-1251"> <title>Всплывающая Подсказка</title> <style type="text/css"> <!— .dlink < color: #0000FF; /* цвет ссылки */ font-weight: bold; /* указывает, что текст ссылки жирный */ font-family: Verdana, Arial, Helvetica, sans-serif; /* семейство шрифта ссылки */ font-size: 16px; /* размер шрифта ссылки */ >#wind < position: absolute; width: 450px; /* ширина всплывающего окна */ left: 32%; /* отступ от левого края экрана */ top: 100px; /* отступ с верху экрана */ border:solid #A0A050 3px; /* цвет и толщина рамки окна*/ display: none; z-index: 100; overflow: hidden; background-color:#ffffff; /* цвет фона внутри окна, стоит белый */ color:#000000; /* цвет текста внутри окна, стоит чёрный */ text-align:center; /* выравнивает весь текст в окне по центру */ padding:5px; >—> </style> </head> <body> <div><a href="#" title="Всплывающее окно" onClick="document.getElementById (‘wind’).style.display=’block’; return false;">Пояснения</a></div> <div align="center"> <table cellspacing="0" align="right"> <tr><td style="padding: 0 3 0 3; background-color: #A0A050; /* цвет кнопки закрыть #A0A050 можете вставить свой */ font-family: Verdana; font-size: 10pt; color: #ffffff; font-weight: bold;" onClick="document.getElementById(‘wind’).style.display=’none’; return false;" onMouseOver="this.style.cursor=’pointer’" onMouseOut="this.style.cursor=’default’">X</td> </tr> </table> Здесь на месте этого текста ставьте свой текст или html код. </div> </div> </body> </html> Подскажите пожалуйста, как интегрировать сюда затемнение, чтобы при открытии модального окна все затемнялось кроме самого окна. Перепробовал кучу вариантов с вашим кодом, но получается только затемнение, само окно остается под затемнением

Это убогий код, и он явно не моего производства. Как интегрировать в эту помойку модальное окно — не знаю. Лучше всё написать заново. Если Вы не знаете, как такое написать, то изучайте HTML. Копировать откуда-то чужой да ещё и кривой код — бесполезная затея.

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

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

А вот CSS

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

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

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

Несколько примеров как затемнить изображение в свойстве background и теге <img> .

Затемнение <img>

Первый способ затемнить img

Сделать тёмный фон под изображением <img> , а самому изображению добавить прозрачность с помощью opacity .

Пример:

Второй способ затемнить img

CSS фильтр Фильтр brightness у <img> .

Пример:

Третий способ затемнить img

Полупрозрачный элемент над <img> .

Пример:
Пример:

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

Если картинка задана через свойство background , то есть два способа ее затемнить:

Первый способ затемнить background

Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6 .

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

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