Блина, оказывается сделать вывод корректный PNG с transparnt-слоем, достаточно проблематичная штука (что бы в Inter Explorer от 6.0 пахала, Fire Fox ну и Opera).
Что это за хитрый слой? ну допустим вам на основную картинку нужно вывести картинку, которая содержит прозрачные точки... Получается красиво, но ...тень полная.
Проблема номер 1.
Как вывести тупо IMG с градиентом/транспорантом - проблем нет.
Для примера пишем:
<img style="BEHAVIOR: url(png.htc)" height="12" src="http://www.blogger.com/png-test-files.png" width="12" />
где png.htc типа хака (можно взять тут) - http://textlibrary.ru/files/png.htc
---------------
Проблема номер 2.
Как вывести допустим для боковой рамки налаживаемую тень на имеющийся под ней слой. То есть картинка вставляеться как фон, допустим таблицы (при этом высота не заданна - то есть любая, до 1000 пикселей):
В HTML для ячекий таблицы пишем что-то такое:
.........
<td class="png" width=""><img height="1" alt="" src="http://www.blogger.com/spacer.gif" width="12" />
..........
В CSS пишем такое для класса png:
.png {
background: url('png-test-files.png');
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=png-test-files.png,sizingMethod=crop);
}
........
где png-test-files.png - наш фоновый рисунок размером допустим 12 на 1000 пикселей.
---------------
Проблема номер 3.
Как вывести графическую кнопку PNG с ховерсом.
В HTML для кнопки пишем следующий код:
.........
<div class="testclass"><a href="http://www.blogger.com/index.php"><img height="14" alt="" src="http://www.blogger.com/spacer.gif" width="38" /></a></div>
.........
В CSS пишем такое для класса testclass:
.testclass a{
background: url('home.png');
background-repeat: no-repeat;
display: block;
width: 38px;
line-height: 14px;
height: 14px;
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=home.png,sizingMethod=crop);
cursor:pointer
}
.testclass a:hover{
background: url('home_h.png');
background-repeat: no-repeat;
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=home_h.png,sizingMethod=crop);
}
Где home.png - оригнальный вид графической кнопки, home_h.png - графическая кнопка при наведении на не курсора мыши.
Вообщем в итоге, поразмыслев решил что можно от варианта №1 вообще отказаться.
Главная проблема которая возникла при работе с PNG, совсместимость с Internet Explorer 6.0 :)
вторник, 17 июня 2008 г.
Подписаться на:
Комментарии к сообщению (Atom)
Комментариев нет:
Отправить комментарий