07. юли

PNG-прозрачност в Internet Explorer 6

Често при изграждането на един сайт дизайнът налага да се използват прозрачни или полупрозрачни елементи. Png-прозрачността е реализирана в новите браузъри, но не така стоят нещата с по-старите версии на Internet Explorer, който все още са доста разпространени сред интернет потребителите. Именно това налага сайтовете, който се изграждат, да са съобразени и с тях.

Съществуват множество техники за реализиране ефекта на прозрачност и полупрозрачност. Използването не gif-файлове е компромисен вариант налагащ ограничени към броя на цветовете, но той е приложим само в случаите на пълна прозрачност. В някой случаи ефект на полупрозрачност може да се постигне и чрез обикновени jpg-файлове, но при този метод доста често се наблюдават „бъгове”.

Еднозначно решение на този проблем няма, или поне аз не съм го открил до момента, но в зависимост от случая подбирам някое от следните решения, който с течение на времето са се оказали най-ефективни според мен.

Решенията описани по-долу са базирана върху употребата на png-файлове и няколко скрипта, който „връщат” прозрачността и полупрозрачност с помощта на DirectX в Internet Explorer 6 и предхождащите го версии на браузъра.

Ако png–файлове са използвани чрез <img>-тагове в HTML -a на сайта употребата на този скрипт е много ефективно и елегантно решение на проблема. Само поставете някъде в <head>-a на вашия сайт този код

<script src="pngimgfix.js" type="text/javascript"></script>

и скрипта автоматично ще обходи png-елементите в кода и ще направи необходимото, за да изглеждат „както трябва”.

Ако използвате png–файлове за фон на <div> или други HTML-елементи зададен посредством CSS може да използвате едни от двата варианта на този скрипт. Добавете към елемента, който има png-файл за фон следния стил

<div style="behavior:url(iefixScale.htc);"></div>

В случай, че фона се наслагва няколко пъти (background-repeat:repeat;) скрипта не реаги коректно. Следващите примерни показват разликите между двата варианта на този скрипт.

<div>-a, на който ще сложим фон

фона, който слагаме на <div>-a

резултат ако използваме scale-варианта (фонът се „разтяга“ върху цялата площ<div>-a)

резултат ако използваме crop-варианта (фонът се „нанася“ само веднъж в <div>-a *)

* При използване на crop-варианта background-position отпада т.е. фонът е винаги в горния ляв ъгъл.

Публиковано от admin в Скриптове


Писането на коментари е забранено.