Как сделать полупрозрачную картинку - Форум общения - Logical-portal

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.117.233.156

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1 1
Модератор форума: Hawk

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

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

Scofield

Сообщение оставлено 29.01.2012 в 17:49:26 | Сообщение #1

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%.

Scofield	Сообщение оставлено 29.01.2012 в 17:49:26 \| Сообщение #1
Пользователь Сообщения: 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%.
	Профиль Цитата Вверх