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

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

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

update Unit PNG также отображается в списке параметров исправления PNG на NETTUTS

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

@Hboss

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

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

Ответ 8

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

Ответ 9

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

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

IE6 не поддерживает поддержку для них.

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

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

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

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

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