Як зробити затемнення фону через css

Відео: Вивчення CSS / CSS3 | # 6 - Як вказати задній фон картинкою CSS

Дуже часто я став бачити на сайтах затемнення фону. Особливо часто це робиться в галереях, де при натисканні на зображення, воно збільшується, а вся інша частина затемнюється. Безумовно, практично скрізь стоїть спеціальний плагін JQuery, але в цій статті я розповім, як зробити затемнення фону через CSS, не вдаючись до JQuery.

Давайте напишу HTML-код:

Відео: Красива анімація фону при наведенні

border="1"gt; 
 
1 
2 
 
 
id="TB_overlay"gt;

Тут я додав одну таблицю, в якості тестового контенту, який буде затемнений. А також блок 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 дуже простий: йде накладення на весь контент чорного блоку з певною прозорістю.