Фото PNG с прозрачным фоном
®
Рис. 2 . В браузере
In tern et Explorer
Область с прозрачным фоном в PNG
файла
comput.png,
в
котором
есть
слой прозрачности (alpha-канал). На
рис.
1
показано,
как должна выгля-
деть эта страничка и как она выгля-
дит в браузерах FF, Opera, Chrome. А
на
рис. 2
- как она выглядит в брау-
зере IE. Прямо скажем, небо и земля.
Причины и решение данной проб-
лемы подробно изложены на стра-
нице автора по адресу
www.tigir.com/
alpha_png.htm.
Ссылка на скачивание
библиотеки
www.tigir.com/fixpng.js
(размер 624 байта). А я лишь при-
веду простой пример решения.
<html>
<head>
.
<!—[if It IE 7]>
<![if gte IE 5.5]>
<script type=”text/javascript”
src=”fixpng.js”></script>
<style type=”text/css”>
s
.iePNG, IMG (filter:expression(fixPNG(this));}
.iePNG A { position: relative; }/* стиль для нор-
мальной работы ссылок в элементах с PNG-фо-
|ном * /
;
</style>
<![endif]>
<!{endif]— >
</head>
1
<body>
<h1 >Фото PNG с про-
зрачным фоном</1г1>
<img src="comput.png”
width=”300"
height=”120”>
<h1 >Область с прозрач-
ным фоном в PNG</h1 >
то повторяющегося фона изображение будет вы-
водиться всего единожды и то на всю область, т.е.
будет растянуто, вместо повторения.
Поэтому
имеет
смысл
применять
только
в
тех
местах, где фон не повторяется.
К тому же для области с таким
фоном следует указывать класс,
например,
так
c/ass=
”iePNG”
или
если
область
уже
имеет
свой класс, то указывать совме-
щенный класс так
class= "mydiv
iePN G ”,
где “mydiv” - ваш класс.
Пока не забыл, скрипт библиоте-
ки требует наличия картинки размером
в 1
пиксель с прозрачным фоном в формате
GIF. Поэтому все необходимое найдете в архиве
на странице
в
секции “Программирование”.
<div elass=”iePNG” style=”width: бООрх; height:
240рх; background-image: url(comput.png)”>
</body>
</htm l>
А напоследок скажу, что если изображения для
оформления вашего сайта собраны в какой-то
папке, то путь к фотке в 1 пиксель можно указать
прямо в скрипте йхрпд^э в строке вида
е/етелГ.вгс
=
“ 1px.gif”;
В этом коде видно, что в теге
HEAD
мы объявля-
ем об
использовании
скрипта
fixpng.js.
Если
на
своем сайте все скрипты вы храните в некой пап-
ке, то путь к скрипту можно изменить, например,
так: “js/fixpng.js".
Далее описываются стили для заплат. Они обес-
печат корректный
вывод в
IE изображений
PNG с
прозрачностью.
Но чтобы изображение нормально
выводилось, да и вообще было видно, необходимо
указывать для него атрибуты width/ height, иначе мы
ничего не увидим.
Если
необходимо
исправить
фоновое
изобра-
жение в IE, то тут выбор не велик, поскольку вмес-
Теперь давайте предположим, что помимо ста-
тических картинок и фона на нашей веб-странице
имеется кнопка (быть может, целое меню из кно-
пок),
которая
имеет
один
вид,
а
при
наведении
курсора мыши на нее меняет свой вид на другой.
Оба изображения этой кнопки имеют формат PNG
и канал прозрачности.
Так вот если попробовать составить код кнопки так:
<а Ь ^ = ”тбех.Щ тГ><1тд 8ГС=”сотриТрпд”
width=”300” бе1дт=" 120” Ьогбег=”0”
оптои8еоуег=’ЧЫ8.8гс=’сотрЩ_рге88еб.рпд’”
оптои8еоЩ=ЧЫ8.8гс=’сотрЩ.рпд’”Ж /а >
то все браузеры отобразят кнопку в обеих ее фа-
предыдущая страница 36 Компьютер 2012 06 читать онлайн следующая страница 38 Компьютер 2012 06 читать онлайн Домой Выключить/включить текст