Как сделать слой полупрозрачным?

🕛 19.01.2009, 20:47

Для изменения степени прозрачности элемента применяется стилевой атрибут opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer этот атрибут не работает, поэтому специально для него приходится использовать filter, не входящий в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.

Пример 1. Полупрозрачный слой

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Полупрозрачный слой</title> <style type="text/css"> BODY { background: url(images/star.png); /* Фоновый рисунок */ } .semilayer { padding: 5px; /* Поля вокруг текста */ background: #2bc671; /* Цвет фона */ margin: 0 auto; /* Выравниваем слой по центру */ width: 80%; /* Ширина слоя */ opacity: 0.7; /* Значение прозрачности */ filter: alpha(Opacity=70); /* Прозрачность в IE */ } </style> </head> <body> <div class="semilayer"> Очевидно проверяется, что интерполяция небезынтересно искажает интеграл Дирихле, таким образом сбылась мечта идиота&nbsp;&#8212; утверждение полностью доказано. </div> </body>
</html>

Атрибут filter добавляет прозрачность только для тех слоев, где установлен хотя бы один из размеров (width или height) или для слоя используется абсолютное позиционирование (position: absolute).

Также учтите, что прозрачность действует на все содержимое слоя, включая дочерние элементы, и увеличить для них уровень непрозрачности за счет варьирования opacity не получится. Для примера 1, где прозрачность слоя установлена как 0.7, текст внутри слоя получает такое же значение. Его допустимо установить меньше, но превысить значение прозрачности 0.7 текст уже не может.