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

Наш (любимый) дизайнер продолжает создавать файлы PNG с прозрачным фоном для использования в наших приложениях. Я хотел бы убедиться, что эта функция PNG работает и в «старых» браузерах. Какое лучшее решение?

редактирует ниже

@mabwi & @syd - не важно, согласен ли я с использованием PNG. Это проблема, которую мне нужно решить!

@ Тим Салливан - IE7.js выглядит довольно круто, но я не думаю, что хочу представить все другие изменения в приложении. Я хотел бы решение, которое решает исключительно проблему PNG. Спасибо за ссылку.

13.08.2008 19:09:24
12 ОТВЕТОВ
РЕШЕНИЕ

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

12
13.08.2008 19:14:48
Эта статья довольно устарела и использует очень слабое обнаружение браузера. Есть гораздо более элегантные решения, чем это, например, twinhelix.com/css/iepngfix
Kornel 26.01.2009 14:04:48

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

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

-1
13.08.2008 19:12:49
использовать CSS-фильтры для обеспечения прозрачности png в IE 6
Salvin Francis 17.11.2009 05:51:07

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

2
13.08.2008 19:12:56
Я перепробовал много решений, но этот действительно сделал свою работу! И имеет много других полезных функций, поскольку он пытается заставить Microsoft Internet Explorer вести себя как совместимый со стандартами браузер. Он исправляет многие проблемы с HTML и CSS и обеспечивает прозрачную работу PNG в IE5 и IE6.
Kasper 7.10.2008 15:51:54
поэтому я рекомендую его всем! (извините за дополнительный комментарий)
Kasper 7.10.2008 15:52:39

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

0
13.08.2008 19:34:04
PNG-8 может быть альфа-смешанным. Вы, вероятно, имеете в виду ошибку / ограничение в Photoshop.
Kornel 26.01.2009 13:59:27

Я нашел очень хорошее решение здесь: Unit Interactive -> Labs -> Unit PNG Fix

Модуль обновления PNG также включен в список опций исправления PNG в NETTUTS.

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

  • Очень компактный JavaScript: до 1 КБ!
  • Исправлены некоторые проблемы с интерактивностью, вызванные атрибутом фильтра IE.
  • Работает с объектами img и атрибутами фонового изображения.
  • Запускается автоматически. Вам не нужно определять классы или вызывать функции.
  • Позволяет для автоматической ширины и автоматической высоты элементов.
  • Супер прост в развертывании.
5
20.12.2008 01:09:08

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

Вы вроде как, а вы как бы нет.

IE6 изначально не поддерживает их.

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

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

  • Найти все PNG изображения
  • Используйте фильтр изображений DirectX для их загрузки и создания прозрачного изображения в каком-то формате, который понимает IE
  • Замените изображения отфильтрованной копией.
0
13.08.2008 23:11:57

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

2
13.08.2008 23:31:12

Использование PNG в 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 для первого изображения основан на каталоге таблицы стилей, где второе основано на каталоге просматриваемой страницы - поэтому, почему они не совпадают)

2
18.09.2008 13:45:34

@Hboss

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

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

2
18.09.2008 13:56:00
в 2009 году наш сайт получает 13% людей, использующих IE6. Этот трафик сейчас идет почти исключительно с Facebook - около 13% ваших средних пользователей Facebook используют IE6. Sux, но это реальность
Simon_Weaver 16.01.2009 20:40:43
Сайт, который я поддерживаю, имеет около 40% IE7, 32% IE6 и 18% Firefox.
nickf 18.01.2009 03:26:32
  • IE PNG Fix 2.0, который поддерживает background-positionи -repeat!

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

5
24.03.2012 21:43:34
Указанные 8-битные PNG с альфа-каналом можно легко экспортировать из Fireworks. В палитре «Оптимизация и выравнивание» выберите «PNG 8» и «Альфа-прозрачность». Я не могу найти эту способность в Photoshop (начиная с CS3).
Taylor Edmiston 22.07.2010 13:36:33

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

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

0
24.02.2009 23:24:49

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

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

0
8.04.2009 14:31:22