Differences

This shows you the differences between two versions of the page.

--- transparent_png_in_ie_6 [2007/12/24 13:54] – external edit 127.0.0.1
+++ transparent_png_in_ie_6 [2009/05/01 16:36] (current) – removed slonopotamus
@@ Line 1: / Line 1: @@
-[[start|На главную]]
-====== Универсальная поддержка полупрозрачности в MSIE6- ======
-**Автор:** <html><a href='http://harisov.livejournal.com/profile'><img src='http://stat.livejournal.com/img/userinfo.gif' alt='[info]' width='17' height='17' style='vertical-align: bottom; border: 0;' /></a><a href='http://harisov.livejournal.com/'><b>harisov</b></a></html>
-**Оригинал:** http://harisov.livejournal.com/58661.html
-MSIE6- полупрозрачные PNG не поддерживает, это всем известно. Как обойти это с помощью AlphaImageLoader тоже всем известно. Но обычно описывается или решение в лоб, когда для каждого PNG-24 указывается в стиле AlphaImageLoader с конкретным URL к картинке, или громоздкое решение со скриптом.
-Искал сегодня универсальное решение, чтобы не надо было ни прописывать для каждой картинки свой собственный AlphaImageLoader, ни применять внешние скрипты (мало того, что там написано дофига, так это ещё и внешний файл + используется прозрачный GIF).
-Нашёл [[http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy/|такое]] решение:
-HTML:
-<code html>
-<img class="png" src="/path/to/your.png" alt="different story"/>
-</code>
-CSS:
-<code css>
-img.png {
-    background-image: expression(
-        this.runtimeStyle.backgroundImage = "none",
-        this.runtimeStyle.filter =
-            "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
-            this.src + "', sizingMethod='image')",
-        this.src = "/path/to/transparent.gif"
-    );
-}
-</code>
-Вроде бы то, что надо. Но, во-первых, оно у меня не заработало :), во-вторых, используется прозрачный GIF (т.е. + ещё один HTTP запрос), а в-третьих, нет поддержки MSIE5.
-Думал, пыхтел, пробовал, ругался.
-В итоге родилось такое решение:
-<code html>
-<i class="png"><img src="image.png" alt="Image"/></i>
-</code>
-HTML код чуть больше, чем в предыдущем примере. Сейчас станет понятно почему. Самое главное, как обычно, в CSS:
-<code css>
-    * html .png
-    {
-        width: expression(this.firstChild.width);
-        filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+
-                this.firstChild.src+"', sizingMethod='image')");
-        background: expression("transparent url("+
-                this.firstChild.src.replace(".png", ".gif")+") no-repeat");
-        backgr\ound: none !important;
-    }
-    * html .png img
-    {
-        behavior: expression(this.style.visibility="hidden");
-    }
-</code>
-Теперь по порядку:
-  - Используем * html, чтобы стили применялись только в MSIE6-.
-  - Задаём width, ибо AlphaImageLoader работает только если заданы размеры блока. Причём ширину блоку задаём равной картинке, которая лежит внутри этого блока (this.firstChild.width). Ещё вместо ширины можно задать position: absolute или float: left/right.
-  - filter'ом загружаем PNG, беря src из картинки. Это работает в MSIE-5.5+
-  - Для MSIE-5.0, который не понимает AlphaImageLoader, задаём background, заменяя в имени картинки .png на .gif. Т.о. для MSIE-5.0 надо иметь вторую картинку с обычной прозрачностью, лежащую рядом с полупрозрачным PNG.
-  - Скидываем background для MSIE-5.5+, используя backgr\ound.
-  - А теперь скрываем оригинальную картинку. Причём скрываем её не просто через visibility: hidden, а через expression, чтобы это отработало только при включеных скриптах.
-Итак, что получилось:
-  - Нормальные браузеры показывают PNG-24 as is.
-  - MSIE-5.5 и MSIE-6.0 со включеными скриптами и картинками показывают PNG-24 через AlphaImageLoader.
-  - MSIE-5.5 и MSIE-6.0 со включеными скриптами и отключеными картинками показывают PNG-24 через AlphaImageLoader, ибо ему пофигу, что картинки отключены. :) Это и хорошо!
-  - MSIE-5.5 и MSIE-6.0 с отключеными скриптами показывают картинку на сером фоне. Оно и правильно, чудес не бывает, нет скриптов — нет и компотика.
-  - MSIE-5.0 со включеными скриптами и картинками показывают GIF фоном. Нет полупрозрачности, но это лучше, чем ничего.
-  - MSIE-5.0 со включеными скриптами и отключеными картинками картинку не показывает. Ну, тут ничего не поделаешь.
-  - MSIE-5.0 с отключеными скриптами и включеными картинками показывает картинку на сером фоне.