HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

Png в ИЕ6, полупрозрачный фон и полупрозрачные картинки

Давайте посмотрим, как на сайте сделать кроссбраузерно полурозрачные фоны, текст, картинки.

Как задать полупрозрачный фоновый цвет

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
    <title>Полупрозрачный фон</title>
    <style type="text/css">
        .fon{
            opacity: 0.50; /*задаем прозрачность слоя 50%*/
            filter:alpha(opacity=50); /*задаем прозрачность слоя в ИЕ*/
            position:absolute;/*позиционируем слой, чтобы увидеть полупрозрачность*/
            top:0px;
            left:0px;
            width:100%;
            height:100px;
            background:red;
        }
    </style>
    </head>
<body>
    <div class="fon"></div>
    <h1>Привет, я ноахожусь под полупрозрачным слоем! Это так классно =)</h1>
</body>
</html>

Замечание. При использовании opacity сам слой и всё что находится внутри его, становится полупрозрачным. Т.е. если вы хотите фон сделать полупрозрачным, а то, что находится внутри его, например, текст, картинки не прозрачным, то в качестве фона лучше использовать полупрозрачный png рисунок.

Как задать полупрозрачную фоновую картинку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
    <title>Полупрозрачный фон</title>
    <style type="text/css">
    .fon{
		position:absolute;/*просто задаем позиционирование, чтобы див налез на текст и была видна полупрозрачность*/
		top:0px;
		left:0px;
		width:100%;
		height:100px;
		background:url(24.png);
		_background:none;/*Убираем фон в ИЕ6 с помощью хака*/
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='24.png',sizingMethod='scale'); /*применяем в ИЕ6 с помощью хака фильтр*/
    }
    </style> 
</head>
<body>
    <h1>Этот текст находится под дивом с полупрозрачным фоном</h1>
    <div class="fon"></div>
</body>
</html>

Замечание. В ие6 фоновый полупрозрачный рисунок растягивается на весь размер дива, т.е. сам рисунок надо вставлять равный размеру дива.
Еще одно важное замечание. В фильтре надо указывать путь к картинке относительно корня сайта, а не относительно css файла.

Использование полупрозрачных PNG-рисунков в ИЕ6

Рассмотрим последнюю ситуацию, как задать полупрозрачный рисунок в html коде, т.е. в теге img. Для этого будем использовать ява-скрипт.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
    <title>Полупрозрачный фон</title>
    <style type="text/css">
		.fon{
		position:absolute;/*просто задаем позиционирование, чтобы див налез на текст и была видна полупрозрачность*/
		top:0px;
		left:0px;
		width:100%;
		height:100px;
    }
    </style> 
    <script>
		function correctPNG() {
		for (var i=0; i<document.images.length; i++) {
		var img = document.images[i];
		var imgName = img.src.toUpperCase();
		if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
		var imgID = (img.id) ? "id=\"" + img.id + "\" " : "";
		var imgClass = (img.className) ? "class=\""+img.className+"\" " : "";
		var imgTitle = (img.title) ? "title=\""+img.title+"\" " : "title=\"" + img.alt + "\" ";
		var imgStyle = "display:inline-block;"+img.style.cssText;
		if (img.align == "left") imgStyle = "float:left;" + imgStyle;
		if (img.align == "right") imgStyle = "float:right;" + imgStyle;
		if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
		var strNewHTML = "<span "+imgID+imgClass+imgTitle+" style=\"width: "+img.width+"px; height: "+img.height+"px;"+imgStyle+";"    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'"+img.src+"\', sizingMethod='scale');\"><img src=\"images\/blank.gif\" width=\"1\" height=\"1\" /></span>";
		img.outerHTML = strNewHTML;
		i = i-1;
		}
		}
		}
		if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1)   window.attachEvent("onload", correctPNG); 
    </script>
</head>
<body>
    <h1>Этот текст находится под дивом с полупрозрачным фоном</h1>
    <div class="fon"><img src="24.png" alt="" /></div>
</body>
</html>

Замечание. При использовании скрипта, при некоторых вариантов верстки сайта, могут быть незначительные изменения в ие6 в области картинок, но это происходит редко, будьте внимательней

UPD: Новый способ решения проблемы! Фиксить полупрозрачные png в ие6 лучше как тут (поддержка background-position): html-css.info/2009/09/png-fix-ie6/.

Метки: ie6, opacity, png

Запись опубликована 30.06.2009 в 16:53 и размещена в рубрике css, html, java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (8) на “Png в ИЕ6, полупрозрачный фон и полупрозрачные картинки”

antidom2:

02.07.2009 в 15:41

Спасибо за скриптик.
Lena:

15.08.2009 в 17:07

Очень давно хотелось сделать полупрозрачность фона, но не знала как! Я сама бы скрипт написать не смогла. Спасибо огромное! Все очень понятно:)
Искусство создания сайта:

27.07.2010 в 20:31

Спасибо за примеры. Еще для устранения бага прозрачностью PNG, можно подключать скриптик, который исправляет эту болезнь.
Алексей:

16.11.2010 в 12:28

А как сделать картинку полупрозрачной для любых браузеров?
Аноним:

16.11.2010 в 14:37

Алексей, можно в фотошопе сделать ее полупрозрачной и сохранить в png24, либо к картинке применить opacity:0.50; filter:alpha(opacity=50);
Vefadar:

10.03.2011 в 14:13

В ИЕ 8 эти коды не работаеть
SotelogPRO:

17.06.2011 в 20:14

трава красный корень
pati:

23.12.2011 в 16:35

Почему png картинки(закругленные углы с прозрачностью)накрывает основной фон дива? ( если задать jpeg то все в порядке, только мне нужны именно png так как фон сайта может поменяться.