CSS opacity (CSS прозрачность)

W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

код CSS

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }


код HTML

<html>

<head>

<style type=text/css>

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }

</style>

</head>

<body>

<img src="встовляем картинку" class="img1">

<img src="" class="img2">

<img src="" class="img3">

</body>

</html>


Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует.

Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.