Прозрачность и IE6

DImaN · April 2, 2008

Помогите пожалуйста с одной траблой: на странице используются полупрозрачные PNG рисунки, которые являются или бэкграундом или img src в ячейках таблицы. Во всех браузерах, кроме IE6 и ниже все отображается нормально, но в IE6 png-файлы отображаются серыми картинками. Как можно это исправить?

Немного кода, в котором находятся png-файлы:

 <td width="10" background="images/01.png" height="10"></td>
 <td width="780" background="images/02.png" height="10"></td>
 <td width="10" background="images/03.png" height="10"></td>

P.S. метод с .htc файлом не помогает потому, что у меня не общий бэкграунд в виде png-файла, а отдельные элементы в ячейках

klierik · April 2, 2008

есть .htc который пробегает всю страницу и это фиксит. линк не помню.

Mordraug · April 2, 2008

Создайте файл "png.htc" со следующим содержимым:

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5.5)|[6]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "img/pixel.gif";

if (supported) fixImage();

function propertyChanged() {
 if (!supported) return;

 var pName = event.propertyName;
 if (pName != "src") return;
 // if not set to blank
 if ( ! new RegExp(blankSrc).test(src))
 fixImage();
};

function fixImage() {
 // get src
 var src = element.src;

 // check for real change
 if (src == realSrc) {
 element.src = blankSrc;
 return;
 }

 if ( ! new RegExp(blankSrc).test(src)) {
 // backup old src
 realSrc = src;
 }

 // test for png
 if ( /.png$/.test( realSrc.toLowerCase() ) ) {
 // set blank image
 element.src = blankSrc;
 // set filter
 element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
 src + "',sizingMethod='scale')";
 }
 else {
 // remove filter
 element.runtimeStyle.filter = "";
 }
}

</script>
</public:component>

в коде этого файла есть строчка "var blankSrc = "img/pixel.gif";" ? это путь к прозрачному .gif изображению размером 1х1 пиксель, не забудьте такой гиф создать и правильно указать к нему путь.

в таблице стилей объявите класс примерно так:

.png {	
	behavior: url(png.htc);
	}

вашим изображениям в коде присвойте класс "png":

<td width="10" background="images/01.png" height="10" class="png"></td>
<td width="780" background="images/02.png" height="10" class="png"></td>
<td width="10" background="images/03.png" height="10" class="png"></td>

все.

DImaN · April 3, 2008

ув. Mordraug, у меня к вам несколько вопросов по поводу вышеперечисленных листингов. Файл png.htc находится в папке css, в той же папке лежит файл 1x1-null.gif.

строка с адресом к файлу - var blankSrc = "1x1-null.gif";

в css прописано так:

.png {

behavior: url(png.htc);

}

класы в td выставил.

но все равно никаких изменений. Подскажите плз, что я неверно сделал?

homm · April 3, 2008

Все правильно, просто приведенный Mordraug скрипт не работает с background, а только с img.src

Dimitry Wolotko · April 3, 2008

http://absolvo.ru/tmp/1/png.js

Пример работы - http://absolvo.ru/tmp/1/

И для background подходит.

DImaN · April 3, 2008

Dimitry Wolotko, ок... а как использовать сам скрипт? в head html файла его или подобно png.htc прописывать?

Dimitry Wolotko · April 3, 2008

Ты код - то посмотри.

Просто линкуешь JS и у контейнера указываешь класс.

DImaN · April 3, 2008

Dimitry Wolotko, спасибо, все вышло. вот только почему-то некоторые имэйджи размеры свои изменили...

DImaN · April 3, 2008

Все, нашел поправил. еще раз огромное спасибо!!!

Dimitry Wolotko · April 3, 2008

Не за что - не я ж написал этот код.

Mordraug · April 3, 2008

бррр.. был вероятно невыспавшимся, почему-то подумал что используются img, а не фон для фона проще подключать с помощью условных комментариев отдельную таблицу стилей для IE6 и меньше в которой использовать примерно такую конструкцию:

.my_class {
 background-image:none !important;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="my_img.png",sizingMethod="method");
 }

, где

.my_class ? класс элемента у которого используется фоновое PNG изображение,

my_img.png ? путь к этому PNG изображению,

method ? метод отображения ? crop, если изображение отображается как есть, и scale, если изображение должно тянуться.

Следует учитывать, что полученному таким образом фону нельзя делать позиционирование и размножение по осям, метод scale не размножает (повторяет) изображение, а именно растягивает его путем масштабирования. Поэтому нужно делать такую конструкцию, чтобы фон был всегда left-top в целевом контейнере. Ну и учитывать то, что не любой фон подходит для метода scale (даже если он подходит для обычного размножения) ? линейные градиенты (кроме наклонных), например, подходят, а вот узоры (патерны) уже нет.

Dimitry Wolotko · May 5, 2008

Можно, только без репитов.

supec · July 20, 2008

У меня такая проблема: прозрачность я восстановил по методике с этого сайта http://www.tigir.com/alpha_png.htm. С бэкграундами проблем нету, но при наведении и нажатии курсора перестали меняться картинки в IE6. Тоесть кнопочка стала статичной. Какой выход ? Смена картинок реализована по методике http://www.htmlbook.ru/content/?id=110 (псевдокласс hover).

Maslakoff · July 21, 2008

supec, нужно сверху накладывать...

<div class="alpha">
<div class="alpha_png"></div>
<a href="link" class="alpha_link"><img src="e.gif" alt="Прозрачный рисунок 1x1" /></a>
</div>

.alpha {
position:relative;
width:100px;
height:100px;
}
.alpha_png, .alpha_link {
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
}

.alpha_png {
background:url(my_img.png) no-repeat;
}

* .alpha_png {
 background-image:none !important;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="my_img.png",sizingMethod="method");
 }

вот чтот тип того... лучше * .alpha_png засунуть в

PaLyCH · July 22, 2008

Что бы png не были серыми, нужно удалить ненужную информацию из самих картинок. Для этого есть программа pngout (как отдельная программа и как плугин для фотошопа)

klierik · July 22, 2008

2PaLyCH, Вы этим хотите сказать что после плагина ПНГ изображение будет отображатся под ИЕ6 корректно????!!!! о_О

supec · July 24, 2008

Я посмотрел твой пример, но у меня табличная верстка. Что-то я и так и сяк пытался туда это применить - неполучилось Может подскажешь в каком направлении мне двигаться. На данный момент у меня такой код (сокращенный, без лишних ячеек):

.Table {
position:relative;
left:0px;
top:0px;
z-index:1;
background-repeat:no-repeat;
border:hidden;
}
.iePNG, IMG {
filter:expression(fixPNG(this));
}
.iePNG A {
position: relative;
}
A.Home_Page {
background:url(Button_home_up.png);
display: block;
width: 70px;
height: 70px;
border: 0px;
left:0px;
top:0px;
filter:expression(fixPNG(this));
}
A.Home_Page:hover {
background:url(Button_home_over.png);
}
A.Home_Page:active {
background:url(Button_home_down.png);
}

supec · July 29, 2008

Так пока и не разобрался - дел навалилось. Подскажите кто знает.

noran · August 20, 2008

Такая вот проблемка. Имеется табличка в три строки со ссылками, позиционируется она слоем, нужно под нее фон положить png'шный - неважно как: в слой или бэкраундом. Делал и так, прозрачность достигалась классом iePNG, однако ссылки не работают напрочь. Перебрал много всяких конструкций, в итоге остановился на следующей: Код:

<div id="background" style="background-image:url(blank.gif); filter: 
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Book.png', sizingMethod='scale')"> 
  <div id="Layer5"> 
	<table width="160px" height="160px" border="1"> 
	  <tr> 
		<td width="160px" class="стиль26" onmouseover="this.className = 'стиль24'" onMouseOut="this.className = 'стиль26'" align="center"><a href="http://raspisanie.tpu.ru/" target="_blank">Расписание</a></td> 
		</tr> 
	  <tr> 
		<td width="160px" align="center" class="стиль26" onmouseover="this.className = 'стиль24'" onMouseOut="this.className = 'стиль26'">Научные интересы</td> 
		</tr> 
	  <tr> 
		<td width="160px" class="стиль26" onmouseover="this.className = 'стиль24'" onMouseOut="this.className = 'стиль26'" align="center">Рабочее место</td> 
		</tr> 
	  </table> 
</div> 
</div> 
________________________________________ 
#Layer5 { 
	position:relative; 
	width:160px; 
	height:160px; 
	z-index:1; 
} 
#background { 
	width:160px; 
	height:160px; 
	z-index:1; 
	left: 57px; 
	top: 330px; 
}

В ней все работает, но позиционируется всегда вверху слева ! Причем неважно какому слою я задаю отступы от краев. Вообще-то слой с фильтром (картинкой) должен вкладываться в слой с позиционированием, но в таком случае ссылки перестают себя вести как надо. Подскажите пожалуйста, как эту байду спозиционировать то ?

noran · September 3, 2008

Не могу решить проблему которая выше, хотя вроде решение так близко Помогите, пожалуйста. Плюс еще одна проблема - сделал смену картинок через А. Вот так:

html (участок)

<td width="70px" height="70px" title="Главная страница нашего сайта" background="Site.files/5.png" class="iePNG"><a href="Site.files/Main.html" target="Base" class="Home_Page"></a></td>

Home_Page

A.Home_Page {
	display: block;
	width: 70px;
	height: 70px;
	border: 0px;
	left:0px;
	top:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Site.files/Button_home_up.png', sizingMethod='scale');
}
A.Home_Page:hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Site.files/Button_home_over.png', sizingMethod='scale');
}
A.Home_Page:active {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Site.files/Button_home_down.png', sizingMethod='scale');
}

iePNG

.iePNG, IMG {
	filter:expression(fixPNG(this));
} 
.iePNG A {
	position: relative; 
}

Вроде все хорошо с прозрачностью PNG, но почему-то картинка в A.Home_Page:active не появляется. По сути действует только hover. В чем проблема ?

Edited September 3, 2008 by noran

grantand · September 19, 2008

Всем привет!

Недавно тоже столкнулся с такой проблемой. Нужно было сделать бекграунд в ячейках таблицы, причем бекграунд представляет из себя градиент слева на право на прозрачном фоне. Ну и везде все хорошо а на ИЕ6 застрял.

Сам долго рыскал по инету, в поисках чего-то простенького, без внешних файлов и ДжаваСкриптов, а в конце-концов сделал вот так:

<style type="text/css">
.bgie6 { 
	background: url('images/space.gif'); 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngbg.png', sizingMethod='scale');
	}
</style>

<table border="0">
	<tr><td class="bgie6"><a href="#">Главная</a></td></tr>
	<tr><td class="bgie6"><a href="#">Заглавная</a></td></tr>
	<tr><td class="bgie6"><a href="#">Передглавная</a></td></tr>
</table>

а вот так выглядит сам бекграунд

Че скажите?

Edited September 19, 2008 by grantand

Vlad · September 20, 2008

Вариант с фильтром удобен для одного-двух рисунков.

September 20, 2008

Вариант с фильтром удобен для одного-двух рисунков.

да согласен, для большого количества рисунков этот фильтр перегрузит страницу...но вот все же для данного примера я думаю это самый оптимальный вариант.

rasebor · October 7, 2008

Не работает фильтр для IE6. Подскажите, пожалуйста, в чем ошибка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>PNG IE6 2</title>

<style type="text/css">

BODY {
background: yellow;
}

#bg {
	width: 87px;
	height: 170px;
	background-image: url("img/bg.png");
}

</style>

</head>

<body>

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<style type="text/css">

BODY {
background: green;

#bg {
height:170px; 
width:87px;  
background-image: none;	   
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale');
}

</style>
<![endif]>
<![endif]-->

<div id="bg"></div>

</body>
</html>

Рисунок: http://rasebor.narod.ru/bg.png

grantand · October 7, 2008

background-image: none; заменить на background: url('images/space.gif'); . Смотри ответ выше.

Sign In

Прозрачность и IE6

Question

Link to comment

Share on other sites

40 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest Гость_grantand_*

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information