Вверх

Блог
RSS лента

PNG-прозрачность в IE

Vape Shop Эко Заправка

Припустим нам нужнен фон с прозрачной png-шкой, а на нем розместить ссылку.
Делаем так:

<div class="button_bg"><a href="адресс ссылки">Ссылка</a></div>

А в css стиль добавляем:

  1. .button_bg{
  2.     background: url("botton_menu.png") no-repeat;
  3.    width: 243px;
  4.     height: 34px;
  5.    padding-left: 15px;
  6.    padding-top: 5px;
  7. }
  8. .button_bg A { position: relative; } // без этого в ИЕ не работают ссылки
  9.  
  10. * html .button_bg{
  11.     background: none;
  12.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="botton_menu.png");    
  13. }

Вот второй способ (более практичный):

Достигается на самом деле довольно-таки легко. Берем прозрачный png, берем следующий код:

  1. <script type="text/javascript">
  2. function fixPNG(element)
  3. {
  4.   //Если браузер IE версии 5.5-6
  5.   if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
  6.   {
  7.     var src;
  8.     if (element.tagName=='IMG') //Если текущий элемент картинка (тэг IMG)
  9.     {
  10.       if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
  11.       {
  12.         src = element.src;
  13.         element.src = "/blank.gif"; //заменяем изображение прозрачным gif-ом
  14.       }
  15.     }
  16.     else //иначе, если это не картинка а другой элемент
  17.     {
  18.    //если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
  19.       src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
  20.       if (src)
  21.       {
  22.         src = src[1]; //берем из значения свойства background-шmage только адрес картинки
  23.         element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
  24.       }
  25.     }
  26.     //если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
  27.     if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
  28.   }
  29. }
  30. </script>

Вставляем ПЕРЕД следующим html:

<div style="background: url(some.png) no-repeat;" class="someclass"><a href="#">Ссылка</a></div>

Или таким, если png вставляется не бекграундом:

<div class="someclass"><img src="some.png"/></div>

Остается добавить в css следющее:

  1. .someclass {
  2. filter:expression(fixPNG(this));
  3. }

Создайте изображение размеров в 1 пиксель с именем "blank.gif" и сохраните в той же дериктории что и страица.

Все, теперь png во всех браузерах прозрачная!
Остается добавить – что если сверху png присутствуют какие-либо ссылки, или интерактивные поля (формы и т.п.), то они будут ниже картинки и не кликабельны, решается это просто, добавляется объекту, который нужно поставить выше position: relative;
На данном примере это выглядит так:

  1. .someclass a {
  2.  position: relative;
  3. }

Ваша оценка: Пусто Средняя: 2.8 (13 votes)
Главная | Портфолио | Услуги | Контакты | Блог