Как сделать затемнение фона через CSS
Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется. Безусловно, практически везде стоит специальный плагин JQuery, но в этой статье я расскажу, как сделать затемнение фона через CSS, не прибегая к JQuery.
Давайте напишу HTML-код:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<div id="TB_overlay"></div>
Здесь я добавил одну таблицу, в качестве тестового контента, который будет затемнён. А также блок 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
-
Михаил Русаков
Комментарии (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="Всплывающее окно" class="dlink" onClick="document.getElementById ('wind').style.display='block'; return false;">Пояснения</a></div> <div id="wind"> <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. Копировать откуда-то чужой да ещё и кривой код - бесполезная затея.
Ответить
opacity не поддерживается в старых браузерах..так?
Ответить
Верно.
Ответить
Правильно я понял, чтобы один из элементов не затемнялся среди всех остальных, то надо его вставить между <div id="TB_overlay"> </div> ? Например я поставил картинку, и сделал opacity: 0.77; и все вроде получилось! С остальными элементами также делать или есть какие-либо исключения?
Ответить
И что должно получится? Табличка и поверх нее полупрозрачный фон. Что с этим делать? Опять статья написана для сео
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.