Вместе с другом написали статью на эту тему. Доброго времени суток! Сегодня бы хотелось поговорить о способах достижения прозрачности 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.css body { 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 и замедление "опрозрачивания".
