Есть ли исправление JavaScript PNG для IE6, которое позволяет позиционировать фон CSS?

Я видел несколько исправлений, позволяющих изображениям PNG иметь прозрачность в Internet Explorer 6, но я еще не нашел того, который также позволяет установить фоновую позицию в CSS. Если вы используете спрайты, это нарушает условия сделки. Я прибегал к использованию GIF (которые не столь высокого качества), не используя прозрачные изображения вообще или подавая совершенно другую таблицу стилей для IE6. Есть ли исправление для IE6, которое позволяет использовать прозрачные пленки PNG и фоновое позиционирование?

6 10
javascript css png transparency internet-explorer-6

6 ответов:

Да. Конвертируйте ваши изображения, чтобы использовать индексированные поддоны (png256). Вы можете поддерживать прозрачность (как и gif), но не альфа-канал.

Вы можете сделать это с помощью Irfanview и плагина pngout, pngquant или pngnq.

Команда Yui performance также сделалаотличную презентацию , которая охватывает эту и многие другие концепции оптимизации изображений.

7

Это новый метод, который появился в течение последнего месяца или около того. Со страницы:

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

4

Когда фон статичен, я использую TweakPNG, чтобы изменить цвет фона в PNG на правильный цвет (вместо серого цвета по умолчанию). Любой обычный браузер проигнорирует это, потому что альфа-канал отменяет его, но IE6 и ниже будут использовать этот цвет вместо альфа-канала.

Это означает, что у нас есть прозрачность в IE7+ , в то время как ухудшение хорошо в IE6 и ниже. И все позиционирование css и повторение возможны (потому что нет никаких хаков!).

2

DD_belatedPNG.js работает очень хорошо

2

Вы можете фактически использовать чистый CSS для получения позиционированных фоновых изображений с Альфа-прозрачностью в IE6, используя преимущества Альфа-фильтров IE6 и свойства CSS clip. Жюльен Леконтописывает эту технику в своем блоге .

Обратите внимание, что этот метод действительно приводит к повышению производительности для каждого использования Альфа-фильтра.
1

Т. е. ПНГ исправить в версии v2.0 имеет поддержку Full Альфа+position/repeat.

1