Как получить прозрачность PNG, работающую в браузерах, которые изначально ее не поддерживают?

Вот отличная статья, которая объясняет и показывает, как обрабатывать прозрачность PNG в старых браузерах: http://www.alistapart.com/stories/pngopacity/

Я нашел то, что выглядит очень хорошим решением здесь: Unit Interactive - > Labs - > Unit PNG Fix

блок обновления PNG также включен в список исправлений PNG на NETTUTS

Вот основные моменты с их сайта:

• Очень компактный javascript: под 1kb!
• Исправлены некоторые проблемы с интерактивностью, вызванные фильтром IE атрибут.
• Работает с объектами img и атрибутами фонового изображения.
• Запускать автоматически. Вам не нужно определять классы или вызывать их функции.
• Позволяет использовать элементы auto width и auto height.
• Супер просто развернуть.

• IE PNG Fix 2.0 , который поддерживает background-position и -repeat !

Кроме того, существует палитра 8-битных PNG с полной Альфа-прозрачностью , вопреки тому, что Photoshop и GIMP могут заставить вас поверить,и они лучше деградируют в IE6 – это просто сокращает прозрачность до 1-битной. Используйте pngquant для генерации таких файлов из 24-битного PNGs.

IE7.js обеспечит поддержку PNGs (включая прозрачность) в IE6.

Я возился с попыткой сделать сайт с .pngs, и это просто не стоит того. Сайт становится медленным , и вы используете хаки, которые не работают 100%. вот хорошая статья о некоторых вариантах, но мой совет-найти способ заставить gif работать, пока вам не придется поддерживать IE6. Или просто дайте IE6 деградированный опыт.

Использование PNGs в IE6 едва ли сложнее, чем в любом другом браузере. Вы можете поддерживать все это в вашем CSS без Javascript. Я уже видел, как этот хак показывали раньше...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

Я не уверен, что это действительно CSS, но в зависимости от сайта это может не иметь такого большого значения.

(стоит отметить, что URL для первого изображения основано на каталоге таблицы стилей, где второе основано на каталоге просматриваемой страницы - таким образом, почему они не совпадают)

@Hboss

это все прекрасно и Денди, если вы точно знаете все файлы (и размеры каждого), которые вы собираетесь отображать - это будет королевская боль, чтобы поддерживать этот файл CSS, но я полагаю, что это возможно. Когда вы хотите начать использовать прозрачный PNGs для некоторых очень распространенных целей: а) случайные графики, такие как значки (возможно, разного размера), которые работают на любом фоне, и Б) повторяющиеся фоны; тогда вы облажались. Каждый обходной путь, который я пробовал, в какой-то момент наталкивался на камень преткновения (не могу выделить текст, когда фон прозрачен, иногда изображения отображаются в дурацких размерах и т. д.), И я обнаружил, что для максимальной надежности мне придется вернуться к GIF.

Мой совет-дать шанс PNG transparency hack, но в то же время понять, что он определенно не идеален - и просто помните, что вы перегибаете палку для пользователей браузера, которому больше 7 лет . Что я делаю в эти дни, так это даю пользователям IE6 всплывающее окно при их первом посещении сайта, с дружественным напоминанием о том, что их браузер устарел и не предлагает функций, необходимых для современных веб-сайтов, и, хотя мы постараемся сделать все возможное, чтобы дать вам лучшее, вы получите лучший опыт от нашего сайта и интернета в целом, если вы чертовски хорошо обновитесь.

Одна вещь, о которой нужно думать-это Email клиента. Вы часто хотите PNG-24 прозрачности, но в Outlook 2003 с машиной, использующей IE6. Клиенты Email не допустят CSS или JS трюков.

Вот хороший способ справиться с этим. http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Я считаю, что все браузеры поддерживают PNG-8. Это не альфа-смешанный, но у него есть прозрачные фоны.

Возможно, я ошибаюсь, но я уверен, что IE6 и менее просто не делают прозрачность с файлами PNG.

Ты вроде как есть, а вроде и нет.

IE6 не имеет никакой поддержки изначально для них.

Однако IE поддерживает сумасшедшие пользовательские объекты javascript/css и COM (именно так они изначально реализовали XmlHttpRequest)

Все эти хаки в основном делают это:

• Найдите все изображения png
• Используйте фильтр изображений directx, чтобы загрузить их и создать прозрачное изображение в некотором формате IE.
• Замените изображения отфильтрованной копией.

Если вы экспортируете свои изображения как PNG-8 из Fireworks, то они будут действовать так же, как и gif-изображения. Так что они не будут выглядеть дерьмово и серо, прозрачность будет прозрачностью, но у них не будет полного 24-битного очарования, как у других браузеров.

Возможно, это не полностью решит вашу проблему, но, по крайней мере, вы можете получить часть пути, просто реэкспортируя их.

Возможно, я ошибаюсь, но я уверен, что IE6 и менее просто не делают прозрачность с файлами PNG.

У меня есть два "solutions", которые я использую. Либо создайте файлы GIF с прозрачностью и используйте их везде, либо просто используйте их для IE 6 и старше с условными таблицами стилей. Второй действительно работает только в том случае, если вы используете их в качестве фона и т. д.