понедельник, июля 06, 2009

ie6 PNG backgrounds - отображение png фонов IE6

Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом .


Теперь фоновые .png отлично подчиняются свойствам background-position и background-repeat.

Примеры, пояснения - http://www.dillerdesign.com/experiment/DD_belatedPNG/.
Реализуется все при помощи JavaScript, который создает и присваивает необходимому элементу страницы (то есть наш .png «перерожденный» в VML).

Чтобы работало нужно:

1. cкачать и подключить к HTML-документу JavaScript (на страничке с примерами есть две ссылки — на обычный и сжатый файлы);
2. внутри HTML-документа запустить функцию (DD_belatedPNG.fix()), которой необходимо, в качестве параметра, передать селектор элемента, над которым мы проводим обряд манипуляцию.


Например:




Что особенного?

* в отличии от других fixов не использует AlphaImageLoader, тем самым не создавая путаницы в порядках слоев (изменения z-index после применения фильтра);
* как сказано выше теперь свойства CSS background-repeat и background-position работают;
* заодно поддерживается доступ к стилю элемента через element.style и работа с псевдо-классом :hover;
* скромный вес скрипта — 4 Кб в сжатом виде.

Комментариев нет: