Как сделать полупрозрачную картинку - Logical-Portal.Com

Добро пожаловать на форум, Гость, это ваша панель

Новые сообщения Участники Поиск Правила форума RSS

Страница 1 из 1
1

Как сделать полупрозрачную картинку (Как сделать полупрозрачную картинку)

Как сделать полупрозрачную картинку

Ник: Scofield | Дата: 29.01.2012, 17:49 | Сообщение #1

Интерны

Prison Break

Сообщения:

4354

13665

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

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

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

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Прозрачность</title>
   <style type="text/css">
    .transparent75 {
     filter: alpha(Opacity=75); /* Полупрозрачность для IE */
     opacity: 0.75; /* Полупрозрачность для других браузеров */
    }
    .transparent50 {
     filter: alpha(Opacity=50);
     opacity: 0.5;
    }
    .transparent25 {
     filter: alpha(Opacity=25);
     opacity: 0.25;
    }
   </style>
  </head>
  <body>
   <p>
   <img src="images/cat.jpg" alt="Оригинальное изображение"
    width="250" height="243" />
   <img src="images/cat.jpg" alt="Непрозрачность 75%"
    width="250" height="243" class="transparent75" />
   <img src="images/cat.jpg" alt="Непрозрачность 50%"
    width="250" height="243" class="transparent50" />
   <img src="images/cat.jpg" alt="Непрозрачность 25%"
    width="250" height="243" class="transparent25" />
   </p>
   </body>
</html>

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

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

Уникальные статьи/описания/обзоры Rich Corp
Комплексный прогон сайтов ru и en