Властивість CSS opacity відповідає за прозорість елементів (картинки, тексту, блоки) в html.
Синтаксис CSS opacity
Де value може приймати дійсні значення в діапазоні від 0.0 до 1.0. Значення 1.0 - означає, що прозорість відсутня (за замовчуванням).
Приклади: як прозорість в html
Приклад №1. Прозоре зображення в html
Перша картинка виведена без прозорості, друга з прозорістю 0.5
На сторінці перетворюється в наступне
Приклад №2. Ефекти з прозорістю в html
За замовчуванням блок частково прозорий. При наведенні курсора миші блок стає яскравим. Такі ефекти часто використовуються в дизайні сайтів.
На сторінці перетворюється в наступне
Приклад №3. Прозорий блок на зображенні в html
Нижче наведено приклад напівпрозорого блоку, який частково закрив зображення. Блок спеціально накриває зображення не повністю з метою показати, як він виглядає на порожньому тлі.
На сторінці перетворюється в наступне
Примітка
Internet Explorer до версії 9.0 для зміни прозорості використовує фільтри, для цього браузера слід записати filter: alpha (opacity = 50), де параметр opacity може приймати значення від 0 до 100.