Прозрачность фона

[Hijacker]

Здравствуйте! Искал темы и в нете и на этом форуме, так и не решился ни на один из вариантов, либо решил - но не получалось.

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

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

<table id="headpanel">
  <tr>
	<td id="headpanel_l">...</td>

	<td id="headpanel_r">
		<div id="headpanel_reset">
			<div id="search">поиск</div>
			<div id="time">часы</div>
			<div id="headinfo">название сайта</div>
		</div>
	</td>

  </tr>
</table>

#headpanel_r {
	width: 300px;
	background: #FFF;
	opacity: 0.3;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); 	
}
#headpanel_reset {
	opacity: 1.0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); 	
}

Этот код конечно не работает, но можно ли как-то в этом духе отменить прозрачность от дочерних элементов (поиск, часы и имя сайта), при этом с поддержкой старых браузеров???

ПНГ-24 вариант, но я так понял проблемы появляются у юзверей ИЕ до 7-й версии? Или обьясните мне, тупому, как вылечить ИЕ от невосприятия ПНГ?

Заранее благодарю!

Edited November 8, 2010 by Hijacker

[Vlad]

opacity наследуется и не может превышать значение своего родителя. Вот здесь описаны некоторые способы обхода. Ну и на форуме не так давно обсуждали RGBa.

http://htmlbook.ru/blog/poluprozrachnyy-fon

[psywalker]

Нет дружище, opacity не наследуется. Оно просто накладывает маску поверх всех потомков.

[Hijacker]

Я так понял, что РГБа более простой и кроссбаузерный способ заливки одним цветом?

В статье написано что он воспринимается только последними версиями браузеров, а как же быть со старыми версиями?

http://swetlanabayer.ru/blog/opacity/ - решение фильтром вылечит только ИЕ, или и другие браузеры? И почему применяется градиент, а не обычный фильтр?

ЗЫ. Я склонен больше к кроссбраузерности чем к валидности.

Edited November 8, 2010 by Hijacker

[psywalker]

Не пойдёт?

http://psywalker.ru/Forum/opacity/main-2.html

[SelenIT]

а как же быть со старыми версиями?

Им придется жить без прозрачности. К счастью, их по статистике остались считанные проценты (в основном 9-я Опера).

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

Только IE. Градиент, потому что только он (судя по всему) понимает RGBA-нотацию де-факто.

Как мегакроссбраузерный вариант — для IE Светин градиент, для остальных png-картинка

[Vlad]

RGBA я бы не назвал кроссбраузерным методом. IE до 9 его не поддерживает, для других браузеров также надо смотреть список версий. Пока универсальнее использовать opacity с наложением, как Макс показал. Ну или PNG, IE6 который не любит. В общем, вариантов много, надо искать подходящий либо по идеологии (кто-то IE6 ненавидит, другому он в радость), либо по ситуации.

[Hijacker]

Хм, получилось о_О , до этого по похожему примеру пробовал - нифига не получалось.) Спасибо.

Вот исх. коды, всё ли правильно выполнено?

<table id="headpanel">
  <tr>
	<td id="headpanel_l">...</td>

	<td id="headpanel_r">
		<div id="opacity"></div>
		<div id="headpanel_reset">
			<div id="search">поиск</div>
			<div id="time">часы</div>
			<div id="headinfo">название сайта</div>
		</div>
	</td>

  </tr>
</table>

#headpanel_r {
	width: 300px;
	position: relative; 
}
div#opacity {
	background: #FFF;
	bottom: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 300px;
	height: 250px;

	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
	filter:alpha(opacity=50); /* IE +*/
	-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
	-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
	opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ 
}
div#headpanel_reset {
	position: relative;
	z-index: 1;	
}

Никаких скриптов не нужно? На каких браузерах будет работать?

[psywalker]

На каких браузерах будет работать?

К сожалению во всех)

[SelenIT]

В IE6 не будет растягивать через bottom:0, top:0, expression нужен...

Я имел в виду что-то вроде такого варианта:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
<style>
div {
	position: absolute;
	top: 5px;
	left: 40px;
	width: 200px;
	height: 150px;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZ
G9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZFjF0MBABGBiIBKMKqSOQoAAAwDrnQE+oqKVVwAAA
B
JRU5ErkJggg==);
	/* это png-картинка с заливкой цвета #00aa00 и прозрачностью 50%, которую прогнали через http://www.sveinbjorn.org/cgi-bin/dataurlmaker-cgi.pl */
		/* только переносы не нужны, это форум добавил */
	/* должно работать во всём новее Оперы 7.2 */
}
</style>
<!--[if lte IE 7]>
<style>
div {
	background: transparent; /* тут картинка не нужна, зато есть градиенты */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8000aa00', endColorstr='#8000aa00');
}
</style>
<![endif]-->
	</head>
<body>
<p>Просто текст, обычный текст</p>
<div>
<p>Текстик на полупрозрачном фончике</p>
</div>
</body>
</html>

Edited November 8, 2010 by SelenIT

[psywalker]

В IE6 не будет растягивать через bottom:0, top:0, expression нужен...

Да, да, точняк, забыл экпрешан добавить в код, ссори.

SelenIT

Слушай дружище, а можешь поподробнее рассказать о своём методе. Что за сервис? Как им пользоваться? И что вообще это за вещь такая?

[SelenIT]

Про метод хорошо написано здесь. Сервис — первое, что нагуглилось по запросу "data url generator", сказать о нем пока могу только "кажется, работает"

[psywalker]

Про метод хорошо написано здесь. Сервис — первое, что нагуглилось по запросу "data url generator", сказать о нем пока могу только "кажется, работает"

Спасибо друг. А вообще как-то слышал об этой технике, да вот что то всё руки не дойдут о ней почитать, да и в быту ни разу не требовалась

[Hijacker]

я не про... может обьясните, что нужно добавить? Куда нужно добавить експершн, и что в нем писать?

Я так понял нужно

div#opacity {
	background: #FFF;
	bottom: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 300px;
	height: 250px;

	filter: expression( runtimeStyle.filter = 'alpha(opacity='+currentStyle.opacity*50+')' ) 
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
	filter: alpha(opacity=50); /* IE +*/
	-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
	-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
	opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ 
}

Верно?

Edited November 8, 2010 by Hijacker

[Hijacker]

Люди!

[psywalker]

Попробуй так

div#opacity {

background: #FFF;

bottom: 0;

opacity: 0.5;

position: absolute;

top: 0;

width: 300px;

height: 250px;

height: expression(this.parentNode.offsetHeight +'px');

}