фон - полупрозрачный png

[rash]

Уважаемые господа, не подскажете ли более-менее красивый способ положить полупрозрачный PNG в качестве фонового изображения, чтобы это не выглядело ужасно в [lte IE 6]. Решений для обычного находится предостаточно, а относительно фона - практически ничего не говорится...

[Emm]

Как нет! http://www.tigir.com/alpha_png.htm - для всего

[rash]

Читаю, спасибо. Не находил раньше...

Мне бы поучиться поисковиками пользоваться...

[rash]

В продолжение эпопеи с png - вот такая ситуация...

Макет состоит из большого изображения, которое представлят собой общий фон сайта. Изображение разделено на 3 полупрозрачных слоя, которые, смещаясь, позволяют ему тянуться по вертикали. Самая большая для меня пока проблема заключается в том, что эти слои накладываются друг на друга, использую для этого отрицательные margin-ы, другого выхода не вижу...

В IE для загрузки полупрозрачного изображения PNG использую AlphaImageLoader. Изображение загружается в блок (имитирует фон), внутри которого находится еще один блок с контентом.

Сама проблема выглядит так:

ЗАГОЛОВОК

————--

КОНТЕНТ

————--

ФУТЕР

Контент "подтянут" на заголовок, а футер "подтянут" на контент с помощью отрицательных margin'ов. И полупрозрачная часть футера, например, перекрывает текст контента. То есть его можно прочитать сковзь изображение (хоть и неудобно), но нельзя даже выделить мышью отдельное слово. Собственно, вопрос - как это возможно исправить? Страница должна тянуться по вертикали, более-менее прилично это получается как раз смещением слоев, то есть разрезать макет иначе просто не вижу способа.

Пришел в голову вариант поэкспериментировать с z-index, но безуспешно...

Может ли кто-нибудь подсказать идею, как попытаться это вылечить? :/

[rash]

Проблема вроде решена с помошью отрицаиельных z-index только для IE...

[serdeles]

Может, кому поможет. Скрипт, который позволяет юзать png с прозрачным фоном как минимум в IE, Opera и FireFox:

function setElementOpacity(sElemId, nOpacity)
{
//alert(nOpacity);
var opacityProp = getOpacityProperty();
 var elem = document.getElementById(sElemId);
 //alert(elem);
 if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью

 if (opacityProp=="filter") // Internet Exploder 5.5+
 {
 nOpacity *= 100;

 // Если уже установлена прозрачность, то меняем е? через коллекцию filters, иначе добавляем прозрачность через style.filter
 // try{
 var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
 if (oAlpha) oAlpha.opacity = nOpacity;
 else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+="
 //}
 //catch(e){
 //oAlpha = elem.style.opacity;
 //alert(e.message);
 //}
 }
 else // Другие браузеры
 elem.style[opacityProp] = nOpacity;
}

function getOpacityProperty()
{
 if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9, IE7)
 return 'opacity';
 else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 и младше, Firefox 0.8 
 return 'MozOpacity';
 else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1
 return 'KhtmlOpacity';
 else if (document.body.filters && navigator.appVersion.match(/MSIE ([d.]+);/)[1]>=5.5) // Internet Exploder 5.5+
 return 'filter';

 return false; //нет прозрачности
}


function checkPNGImages(){
 try{
 var imColl = document.getElementsByTagName('img');
 for(var i = 0; i < imColl.length; i++){
 var img = imColl[i];
 if(img.className == 'smart-picture'){
 enableAlphaImages(img);
 }
 }
 }catch(e){}
}

function enableAlphaImages(img){
 var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
 var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
 isDOM = document.getElementById //DOM1 browser (MSIE 5+, Netscape 6, Opera 5+)
 isOpera = isOpera5 = window.opera && isDOM //Opera 5+
 isMSIE = document.all && document.all.item && !isOpera //Microsoft Internet Explorer 4+
 isMSIE5 = isDOM && isMSIE //MSIE 5+
 if(!rslt){
 return;
 }
 //var img = document.images[name];
 //img_name = img.src;
 /*
 isDOM = document.getElementById //DOM1 browser (MSIE 5+, Netscape 6, Opera 5+)
 isOpera = isOpera5 = window.opera && isDOM //Opera 5+
 isMSIE = document.all && document.all.item && !isOpera //Microsoft Internet Explorer 4+
 isMSIE5 = isDOM && isMSIE //MSIE 5+
 */
 if (isMSIE5)
 {
 img_name = img.src;
 img.src = "images/oblom.gif";
 img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img_name + "', sizingMethod='crop')";

 }
 }

Под oblom.gif подразумевается прозрачный gif-рисунок, размером 1х1 px. Сам скрипт лучше аттачить, чтобы не занимал много места.

[Emm]

Скрипт, который позволяет юзать png с прозрачным фоном как минимум в IE, Opera и FireFox:

A причем тут Opera и FireFox? Проблема вроде только в IE.

[Maslakoff]

офф 2 Emm, это он так))) на радостях)))