Альфа прозрачность в Internet Explorer
Не смотря на то, что Internet Explorer предпочитает всё меньшее число людей этот браузер остаётся достаточно популярен, чтоб обращать на него внимание. Отсутствие нормальной работы с альфа каналом для png изображений всегда приносило головную боль верстальщикам. Для решения данной проблемы мы воспользуемся фильтрами.
Предположим, что у нас есть картинка с альфа каналом и названием test.png
для того, чтоб появился альфа канал необходимо в хэд подключить следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <head><!--[if gte IE 5.5000]> <sсriрt language="JavaScript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher. { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } window.attachEvent("onload", correctPNG); </sсriрt> <![endif]--></h |
и у нас все картинки приобретут альфа прозрачность;
Для того чтобы подключить её в фон я воспользуюсь не стандартным решением на стилях а php кодом:
1 2 3 4 5 6 7 8 9 10 11 12 | <? $agent = substr($_SERVER['HTTP_USER_AGENT'], 0); if (preg_match("!MSIE([\s\d\./]+)!msi", $agent, $math)) { echo "<style>.test {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');} </style> "; } else { echo "<style>.menuDropped ul li {background:url(test.png) left top;}</style>"; } <div class="test"></div> |
Всё хорошо работает всё подключилось и появилась альфа прозрачность, но что за странность? Почему в ИЕ6 перестали нажиматься ссылки?! Что за дела спросите вы?
Думаю как минимум 90% людей сразу побегут ставить Z-index и у них ничего не получится. Почему? А потому что и этот параметр в IE6 очень глючит… но как вы могла догадаться выход всегда есть 
Для того, чтоб ссылки снова стали кликабельными сделаем следующее
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <? $agent = substr($_SERVER['HTTP_USER_AGENT'], 0); if (preg_match("!MSIE([\s\d\./]+)!msi", $agent, $math)) { echo "<style>.test {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');} .test a { position: relative; z-index: 1;} </style> "; } else { echo "<style>.menuDropped ul li {background:url(test.png) left top;}</style>"; } <div class="test"><a href="#">Test</a></div> |
Вот таким способом решается проблема альфа прозрачности
a
2 комментариев на "Альфа прозрачность в Internet Explorer"
А что делать с оперой?
а что с оперой то не так? вроди б с ней по стандарту всё ок
Продолжение дискуссии на форуме: link
Вы можете продолжить обсуждение этой статьи на форуме