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

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

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

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

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

Источник

12 ответов

Решение

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

Источник

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

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

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

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

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

Источник

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

Источник

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

Источник

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

Источник

@Hboss

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

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

Источник

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

Источник

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

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

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

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

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

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

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

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

Источник

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

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

Источник

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

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

Источник
Другие вопросы по тегам