Как установить изображение полупрозрачным?

🕛 19.01.2009, 19:18

За управление прозрачностью элемента на странице отвечает стилевой атрибут opacity, который относится к свойствам CSS3. В качестве значения применяются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта.

Не все браузеры понимают opacity, в частности, это умеет делать Firefox 2, Safari 1.3, Opera 8, а также их старшие версии. Internet Explorer ни в одной версии не поддерживает атрибут opacity, поэтому для этого браузера следует использовать атрибут filter со значением alpha(Opacity=X), где под X подразумевается целое число от 0 до 100. Это значение определяет уровень прозрачности: 0 - полная прозрачность; 100 - наоборот, непрозрачность объекта.

Соединяя воедино два атрибута, получим универсальный код, который устанавливает заданную прозрачность для изображений (пример 1).

Пример 1. Полупрозрачное изображение

HTML 4.01CSS 2.1CSS 3IE 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"> .transparent75 { filter: alpha(Opacity=75); /* Полупрозрачность для IE */ opacity: 0.75; /* Полупрозрачность для других браузеров */ } .transparent50 { filter: alpha(Opacity=50); opacity: 0.5; } .transparent20 { filter: alpha(Opacity=20); opacity: 0.2; } </style> </head> <body> <p> <img src="images/belka.jpg" alt="Оригинальное изображение" width="250" height="273"> <img src="images/belka.jpg" alt="Непрозрачность 75%" width="250" height="273" class="transparent75"> <img src="images/belka.jpg" alt="Непрозрачность 50%" width="250" height="273" class="transparent50"> <img src="images/belka.jpg" alt="Непрозрачность 25%" width="250" height="273" class="transparent20"> </p> </body>
</html>

В данном примере вначале приводится исходная фотография, к которой не применяются настройки прозрачности, последующие фотографии отображаются с уровнем непрозрачности 75%, 50% и 25%.