Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.227.49.148
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
Как сделать полупрозрачную картинку
Сообщение оставлено 29.01.2012 в 17:49:26 | Сообщение #1
За управление прозрачностью элемента на странице отвечает стилевое свойство 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%.
 
 
   
Сообщение оставлено 31.01.2012 в 03:36:56 | Сообщение #2
Блин, спасибо большое, такой легкий код и только сейчас осенило как его можно применить))) grin
 
 
   
Сообщение оставлено 31.01.2012 в 18:14:25 | Сообщение #3
MaxAhnung, Ну ты хоть рад?)))

По теме: Спасибо,ну я знал)
 
 
   
Сообщение оставлено 15.02.2012 в 01:27:12 | Сообщение #4
Quote (6oeBuk)
MaxAhnung, Ну ты хоть рад?)))

я в восторге smile
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика