Доброго времени суток!
Сегодня бы хотелось поговорить о способах достижения прозрачности PNG в увы, но часто используемом на данный момент браузере Internet Explorer 6.0.
Такие браузеры как Mozilla, Opera уже давно поддерживают прозрачность PNG, это знают многие,а у Internet Explorer 6.0 существует проблема с правильной загрузкой альфа-канала в PNG-файлах. Эту проблему можно решить несколькими путями.
- Первый путь. Используем заместо PNG GIF-файлы
- Используем фильтры
Многие выбирают первый путь - он и проще и быстрее скажите Вы. Но что он реально нам дает??! 256 цветов при таком же размере файла. Вы скажите анимация.. Но анимация это не такой веский повод ими пользоваться. GIF - это уже устаревшая технология, это пережитки.
Что касается второго пути и того, как нам можно избежать проблем с совместимостью браузеров - фильтры ведь поддерживаются только на Internet Explorer-е.
Предлагается такое решение. Делается CSS (в файле), подразумевающий что браузер поддерживает прозрачность PNG.
Дальше делается еще один файл - iefix.css к примеру, где мы переписываем те классы (идетификаторы), где требуется прозрачность.
Пример ниже - думаю поймете сами.
default-1.cssbody
{
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.navigbar
{
position:absolute;
background-image:url(/style/login_panel.jpg);
background-repeat:repeat-x;
text-align:right;
top:173px;
left:0px;
width:100%;
height:66px;
z-index:10;
}
.navigbar div
{
padding-top:15px;
padding-right:5px;
margin:0px;
}
.twoColElsLtHdr #container {
/*width: 46em; */
width: 100%;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColElsLtHdr #topshader{
background-image:url(/style/header.png);
background-position:right;
background-repeat:no-repeat;
z-index:9;
width:100%;
position:absolute;
top:0px;
float:right;
}
.twoColElsLtHdr #logo
{
background-image:url(/style/logo.jpg);
background-repeat:no-repeat;
float:left;
width:502px;
height:177px;
z-index:1;
}
#rpanel
{
padding-top:20px;
float:right;
padding-right:5px;
display:block;
clear:both;
}
#spanel
{
padding-top:0px;
padding-right:5px;
display:block;
clear:both;
}
#rpanel div.icon
{
margin: 3px;
}
#rpanel div.icon a
{
display: block;
float: left;
height: 97px !important;
height: 100px;
width: 70px !important;
width: 70px;
vertical-align: middle;
text-decoration : none;
border: 1px solid #DDD;
padding: 0px 5px 1px 5px;
}
#rpanel div.icon a:link
{
color : #808080;
}
#rpanel div.icon a:hover
{
color : #333;
background-color: #f1e8e6;
border: 1px solid #c24733;
padding: 0px 4px 0px 6px;
}
#rpanel div.icon a:active
{
color : #808080;
}
#rpanel div.icon a:visited
{
color : #808080;
}
#rpanel div.icon img
{
margin-top: 10px;
}
#rpanel div.icon span
{
display: block;
padding-top: 3px;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
}
.twoColElsLtHdr #right-tool
{
position:absolute;
top:0px;
right:0px;
padding-right:5px;
z-index:99;
}
.twoColElsLtHdr #right-tool-bg{
float:right;
position:absolute;
top:0px;
right:0px;
z-index:8;
background-image:url(/style/right_tool.png);
background-repeat:repeat-y;
width:214px;
height:177px;
}
.twoColElsLtHdr #header {
background:url(/style/top_background.jpg);
background-repeat:repeat-x;
height:220px;
padding: 0px;
}
.twoColElsLtHdr #sidebar1 {
position:relative;
left:0px;
top:0px;
float: left;
width: 200px; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0;
background-color: #F8FEE2;
}
.twoColElsLtHdr #sidebar1 h3,
.twoColElsLtHdr #sidebar1 p
{
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
.twoColElsLtHdr #mainContent {
position:relative;
left:0px;
margin: 0 1em 0 13em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
}
.twoColElsLtHdr #newscontent {
float:right;
display:block;
width:100px;
padding-left:5px;
}
.twoColElsLtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:url(/style/bottom_background.jpg);
background-repeat:repeat-x;
height:100px;
clear:both;
}
.twoColElsLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
iefix.css/* CSS Document */
.twoColElsLtHdr #sidebar1
{
padding-top: 30px;
}
.twoColElsLtHdr #mainContent
{
zoom: 1; padding-top: 15px;
}
.twoColElsLtHdr #topshader
{
background-image:url('/style/superligth/x.gif'); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/style/header.png', sizingMethod='scale'); background-position:right;
background-repeat:no-repeat;
z-index:9;
width:100%;
position:absolute;
top:0px;
float:right;
}
.twoColElsLtHdr #right-tool-bg
{
background-image:url('/style/superligth/x.gif'); /*Существующий програчный пустой гиф*/
background-repeat:repeat-y;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/style/right_tool.png', sizingMethod='crop'); z-index:1;
}
Обратите внимание на выделенные моменты. Если что не понятно, спрашивайте, отвечу. Эту штуку я выдрал из JS-скрипта SuperSleight. Но его использование чревато некоторыми моментами - это и отключенная поддержка JavaScript и замедление "опрозрачивания".
Скачать SuperSleight можно тут
http://24ways.org/code/supersleight-transparent-png-in-ie6/supersleight.zipПочитать о прозрачности можно тут еще
http://24ways.org/2007/supersleight-transparent-png-in-ie6Был еще блог, но я забыл, вспомню - напишу. Но все статьи на английском - лично для меня это не помеха.
Далее, есть еще один сайт классный - "CSSBlast". Это не реклама если что
Это ресурс для веб-разработчиков, на нем я и нашел о прозрачности для PNG. Рекомендую
http://cssblast.ru/Ну и в общем то все, будут вопросы - кричите
Забыл главное - вот так это дело заставлять работать..
<style type="text/css" media="all">
<!--
@import url("/css/default-1.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("/css/iefix.css");
</style>
<![endif]-->
Теги <!--[if lte IE 6]> ..<![endif]--> как раз и сработают на Internet Explorer-e
