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

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

12 голосов
/ 13 августа 2008

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

правки ниже

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

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

Ответы [ 12 ]

12 голосов
/ 13 августа 2008

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

5 голосов
/ 26 января 2009

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

5 голосов
/ 14 августа 2008

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

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

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

  • Очень компактный javascript: менее 1 КБ!
  • Исправляет некоторые проблемы с интерактивностью, вызванные фильтром IE. атрибут.
  • Работает с объектами img и атрибутами фонового изображения.
  • Запускается автоматически. Вам не нужно определять классы или звонить функции.
  • Допускается автоматическая ширина и высота элементов.
  • Супер прост в развертывании.
2 голосов
/ 18 сентября 2008

@ Hboss

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

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

2 голосов
/ 18 сентября 2008

Использование 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 голосов
/ 14 августа 2008

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

2 голосов
/ 13 августа 2008

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

0 голосов
/ 08 апреля 2009

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

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

0 голосов
/ 25 февраля 2009

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

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

0 голосов
/ 14 августа 2008

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

Вы как бы, а вы как бы.

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

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

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

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