Ви тут: Головна - CSS - CSS Основи - Як зробити затемнення фону через CSS
Дуже часто я став бачити на сайтах затемнення фону. Особливо часто це робиться в галереях, де при натисканні на зображення, воно збільшується, а вся інша частина затемнюється. Безумовно, практично скрізь стоїть спеціальний плагін JQuery. але в цій статті я розповім, як зробити затемнення фону через CSS. не вдаючись до JQuery.
Давайте напишу HTML-код:
| 1 | 2 |
Тут я додав одну таблицю, в якості тестового контенту, який буде затемнений. А також блок TB_overlay. який і є ключовим, тобто він буде затемнювати. Наводжу CSS-код:
#TB_overlay background-color: # 000; /* Чорний фон */
height: 100%; / * Висота максимальна * /
left: 0; / * Нульовий відступ зліва * /
opacity: 0.50; / * Ступінь прозорості * /
position: fixed; / * Фіксоване положення * /
top: 0; / * Нульовий відступ зверху * /
width: 100%; / * Ширина максимальна * /
z-index: 100; / * Завідомо бути НАД іншими елементами * /
>
На мій погляд, даний спосіб затемнення дуже простий і зрозумілий, тому він і застосовується найчастіше.
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так:
Добрий вечір, Михайло. Я скопіювала код, але з'явилася тільки таблиця, без всякого затемнення. Чому?
Спробуйте в інших браузерах, якщо не вийде, значить, якось не так підключили стилі.
Михайло, добрий день. Я новачок, і вчуся писати ХТМЛ сторінки. Є такий ось код, напевно він навіть вашого виробництва:
| X |
Це убогий код, і він явно не мого виробництва. Як інтегрувати в цю смітник модальне вікно - не знаю. Краще все написати заново. Якщо Ви не знаєте, як таке написати, то вивчайте HTML. Копіювати звідкись чужий та ще й кривої код - марна затія.
opacity не підтримуються в старих браузерах..так?
Правильно я зрозумів, щоб один з елементів не затемнюється серед всіх інших, то треба його вставити між