Я привык к идее, что если я хочу/нужно использовать альфа-транс PNG в кросс-браузере, я использую фоновое изображение на div, а затем, только в CSS с IE6, отметьте фон как "none" и включить правильный аргумент "фильтр".
Есть ли другой способ? Лучше? Есть ли способ сделать это с помощью тега img, а не с фоновыми изображениями?
Суть в том, что если вам нужна альфа-прозрачность в PNG, и вы хотите, чтобы она работала в IE6, тогда вам нужно применить фильтр AlphaImageLoader.
Теперь есть множество способов сделать это: специальные хакеры для браузера, условные комментарии, итерация Javascript/JQuery/JLibraryOfChoice, CSS-обслуживание на стороне сервера через UserAgent-sniffing...
Но все они попадают в фильтр, и фон удаляется.
Это, скорее всего, "лучший" способ. Но имейте в виду, что это не просто альфа-транс, что IE6 не работает должным образом, когда дело касается PNG файлов; цветовое пространство повреждено из-за того, что IE не реализует гамму должным образом, и поэтому PNG файлы часто показывают "темнее", чем должны.
Одним из альтернативных "решений", которые мы реализовали в недавнем проекте, было обозначение каждого png-изображения классом "toGif", в CSS которого вызывается пользовательское поведение .htc, которое изменяет расширение .png на .gif, если браузер обнаружено как одно, которое мы отметили как проблему. Мы просто включаем GIF-версию каждого PNG вместе с ним по одному и тому же пути, и если браузер окажется таким, который не обрабатывает PNG должным образом, он заменяет его версией GIF изображения. Поэтому мы жертвуем альфа-смешиванием в пользу гарантированной полноты прозрачности и точности цвета, и делаем это только тогда, когда мы знаем, что это, вероятно, не будет выглядеть так, как есть.
Возможно, это не идеальное решение, но я предполагаю, что это характер кросс-браузера.
Изменить: На самом деле теперь, когда я смотрю на проект, мы использовали поведение .htc для класса img, называемого "альфа", который автоматически загружает правильный фильтр на изображении. Таким образом, вы обнаруживаете браузер с помощью javascript вместо чистого CSS-браузера с IE6, поэтому он может быть немного более изящным... но это в основном то же самое.
Для ознакомления с описанием поведения DHTML попробуйте эту ссылку.
Вот конкретное решение, которое мне нравится, используя Javascript (jQuery):
http://jquery.andreaseberhard.de/pngFix/
Легко добавить в существующий сайт, обрабатывать все образы (кнопки формы, фоны, обычные IMG-теги и т.д.) и оставляет ваш CSS приятным и чистым.
Загрузка изображения является единственным доступным исправлением для IE6. Обратите внимание, что поддержка PNG очень рудиментарна (вместе с IE7 тоже) и не может корректно обрабатывать замкнутые прозрачные фоны. Я научился этому трудно, пытаясь создать веб-сайт с прозрачным контейнером. Разумеется, отлично работает в Firefox.
Исправление должно быть ОК для небольших областей фона и любой прозрачной графики переднего плана, но я бы посоветовал не создавать веб-сайт, который использует большую прозрачность с Internet Explorer.
В конечном итоге мое решение состояло в том, чтобы отобразить плоский цвет для IE, но сохранил прозрачность для других браузеров. К счастью, в конце концов не повредил дизайн.
Другой способ - использовать 2 отдельных изображения, например GIF и прозрачный PNG, и соответственно настроить ваш CSS:
/* for IE 6 */
#banner {
background:url(../images/banner.gif);
}
/* for other browsers */
html > #banner {
background:url(../images/banner.png);
}
IE 6 не понимает селекторов дочерних элементов CSS, поэтому игнорирует правило, тогда как браузеры, которые его понимают, дадут вам хороший прозрачный PNG.
Единственный недостаток заключается в том, что у вас должно быть два отдельных изображения, и дизайн может выглядеть не совсем как один кросс-браузер, но пока он не выглядит сломанным, вы должны быть в порядке.
Вот два варианта, которые не используют фильтр AlphaImageLoader.
Для меня, если отправка matted.gif в IE6 невозможна, я использую Fireworks, чтобы добавить палитру с поддержкой IE6 в .PNG.
Обычным решением для img-элементов является изменение src, чтобы указать прозрачный GIF-пиксель размером 1x1 пиксель, а затем использовать тот же фильтр-хак.