Как заставить прозрачность PNG работать в браузерах, которые ее не поддерживают?
https://stackoverflow.com/questions/10243
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Наш (любимый) дизайнер продолжает создавать PNG-файлы с прозрачным фоном для использования в наших приложениях.Я хотел бы убедиться, что эта функция PNG работает и в «старых» браузерах.Какое лучшее решение?
правки ниже
@mabwi и @syd – Вопрос не в том, согласен я или нет на использование PNG.Это проблема, которую мне нужно решить!
@Tim Sullivan - IE7.js выглядит довольно круто, но я не думаю, что хочу вносить все остальные изменения в приложение.Мне нужно решение, которое устраняет исключительно проблему PNG.Спасибо за ссылку.
Решение
Вот отличная статья, которая объясняет и показывает, как обрабатывать прозрачность PNG в старых браузерах: http://www.alistapart.com/stories/pngopacity/
Другие советы
Я нашел здесь очень хорошее решение: Unit Interactive -> Лаборатории -> Unit PNG Fix
обновлять Модуль PNG также представлен на список вариантов исправления PNG на NETTUTS
Вот основные моменты с их сайта:
- Очень компактный javascript:Менее 1кб!
- Исправляет некоторые проблемы с интерактивностью, вызванные атрибутом фильтра IE.
- Работает с объектами img и атрибутами фонового изображения.
- Запускается автоматически.Вам не нужно определять классы или функции вызова.
- Позволяет использовать элементы автоматической ширины и высоты.
- Супер просто в развертывании.
- IE PNG исправление 2.0 который поддерживает
background-positionи-repeat!
Также добавлена палитра 8-битного PNG с полная альфа-прозрачность существуют, вопреки тому, во что могут заставить вас поверить Photoshop и GIMP, и в IE6 они ухудшаются лучше — он просто снижает прозрачность до 1 бита.Использовать pngквант для создания таких файлов из 24-битных PNG.
IE7.js обеспечит поддержку PNG (включая прозрачность) в IE6.
Я пытался создать сайт с .pngs, но оно того не стоило.Сайт становится медленным, и вы используете хаки, которые не работают на 100%.Вот хорошая статья о некоторых вариантах, но мой совет — найти способ заставить GIF работать до тех пор, пока вам не понадобится поддержка IE6.Или просто дайте IE6 ухудшенную работу.
Использовать 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-адрес первого изображения основан на каталоге таблицы стилей, а второй — на каталоге просматриваемой страницы, поэтому они не совпадают)
@Hboss
это прекрасно, если вы точно знаете все файлы (и размеры каждого), которые собираетесь отображать - поддерживать этот CSS-файл было бы очень сложно, но я полагаю, что это возможно.Если вы хотите начать использовать прозрачные PNG для некоторых очень распространенных целей:а) случайная графика, такая как значки (возможно, разного размера), которые работают на любом фоне, и б) повторяющийся фон;тогда ты облажался.Каждый обходной путь, который я пробовал, в какой-то момент наталкивался на камень преткновения (невозможно выделить текст, когда фон прозрачный, иногда изображения отображаются в дурацких размерах и т. д. и т. п.), и я обнаружил, что для максимальной надежности мне придется вернуться к GIF-изображениям.
Мой совет — попробовать хак с прозрачностью PNG, но в то же время понимать, что он определенно не идеален — и просто помните, что вы изо всех сил стараетесь помочь пользователям браузер, которому больше 7 лет.Сейчас я даю пользователям IE6 всплывающее окно при первом посещении сайта с дружеским напоминанием о том, что их браузер устарел и не предлагает функций, требуемых современными веб-сайтами. предоставим вам лучшее, вы получите лучшие впечатления от нашего сайта и Интернета в целом, если вы ХОРОШО ОБНОВИТЕСЬ.
Я считаю, что все браузеры поддерживают PNG-8.Это не альфа-смешивание, но у него прозрачный фон.
Возможно, я ошибаюсь, но я почти уверен, что IE6 и ниже просто не поддерживают прозрачность в файлах PNG.
Ты вроде есть, а вроде нет.
IE6 не имеет для них встроенной поддержки.
Однако в IE есть поддержка сумасшедших пользовательских объектов javascript/css и COM (именно так они изначально реализовали XmlHttpRequest).
Все эти хаки в основном делают следующее:
- Найдите все изображения png
- Используйте фильтр изображений DirectX, чтобы загрузить их и создать прозрачное изображение в каком-то формате, который понимает IE.
- Замените изображения отфильтрованной копией.
Одна вещь, о которой следует подумать, — это почтовые клиенты.Часто вам нужна прозрачность PNG-24, но в Outlook 2003 на компьютере с IE6.Почтовые клиенты не допускают трюков CSS или JS.
Вот хороший способ справиться с этим.http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/
Если вы экспортируете изображения из Fireworks в формате PNG-8, они будут действовать так же, как изображения в формате GIF.Таким образом, они не будут выглядеть дерьмовыми и серыми, прозрачность будет прозрачностью, но у них не будет полной 24-битной красоты, которую имеют другие браузеры.
Возможно, это не полностью решит вашу проблему, но, по крайней мере, вы можете получить часть пути, просто реэкспортировав их.
Возможно, я ошибаюсь, но я почти уверен, что IE6 и ниже просто не поддерживают прозрачность в файлах PNG.
У меня есть два «решения», которые я использую.Либо создавайте файлы GIF с прозрачностью и используйте их повсюду, либо просто используйте их для IE 6 и более ранних версий с таблицами условных стилей.Второе действительно работает, только если вы используете их в качестве фона и т. д.
