Разделы

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

За управление прозрачностью элемента на странице отвечает стилевой атрибут 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. Полупрозрачное изображение

<!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="belka.jpg" alt="Оригинальное изображение"> 
   <img src="belka.jpg" alt="Непрозрачность 75%" class="transparent75"> 
   <img src="belka.jpg" alt="Непрозрачность 50%" class="transparent50"> 
   <img src="belka.jpg" alt="Непрозрачность 25%" class="transparent20"> 
  </p> 
 </body> 
</html>

Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Фотография с различными значениями прозрачности

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

Разделы

Термины

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

Отправить комментарий