Transparentní CSS

Ahoj mám takovej malej problém ...
Chci aby pozadí DIVu #SIZE bylo 50% transparentní.

Mám kod:

Kód:

<div id="size">
    <div id="content">
          CONTENT
    </div>
</div>

k tomu mám styl:

Kód:

#size {
	width: 980px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	background-color: #f5c28c;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	border-radius:10px;
	border: 1px solid #f5c28c;
}
#content {
	font-weight: bold;
	width: 940px;
	margin-left: 40px;
	color: #000;
}

A můj problém je v tom, že transparentní to je, ale i to co je v #CONTENT tedy texty, obrázky ... prostě vše. Má někdo radu jak transparentnost v DIVu #CONTENT nějak resetovat nebo jak to donutit, aby byl transparentní jen ten DIV #SIZE

Děkuji za radu

Přesně tenhle problém jsem řešil minulý týden. Nakonec jsem to vyřešil tak, že jsem hlavnímu divu nastavil na pozadí poloprůhledný .png.

Pokud by někdo měl lepší řešení, budu za něj také rád :)

No to mě taky napadlo, ale moc "košér" to není :) Už si nad tím lámu hlavu od včera a pořád nic ani když tomu #CONTENT nastavím průhlednost na 1 tak na to prostě nereaguje.

cosestanekdyz

Nastav pro DIV #content vlastnost position:relative a problém by měl zmizet.

Kód:

#content {
	font-weight: bold;
	width: 940px;
	margin-left: 40px;
	color: #000;
	position: relative;
}

Tohle nepomohlo, ale díky za tip

cosestanekdyz

Zapomněl jsem zmínit, že uvedené řešení funguje pouze v IE. V podstatě máš jedinou možnost - použít poloprůhledný PNG obrázek na pozadí nadřazeného bloku. To šlape všude.

V normálních prohlížečích se to dá udělat pomocí rgba(červená, zelená, modrá, krytí):

Kód:

background: rgba(245, 194, 140, 0.5);

V IE8 a nižších ti asi nezbyde než použít obrázek.

Původně odeslal cosestanekdyz

No to mě taky napadlo, ale moc "košér" to není :) Už si nad tím lámu hlavu od včera a pořád nic ani když tomu #CONTENT nastavím průhlednost na 1 tak na to prostě nereaguje.

samozřejmě, že všechno uvnitř bloku kterej nastavíš transparent bude taky transparent - to je přece logický... to že dáš uvnitř prvkům 100% znamená, že z transparentu parent bloku se spočítá % - takhle jsi nastavil 100% z 50% a to je 50% :) Vyřešíš to takhle :

Kód:

#size {
  position:relative;
	width: 980px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
/* neboli margin: 50px auto 30px auto; trosku premyslime at nemame css pul mega kravin */
	border: 1px solid #000;
}
#contentbg { 
  position:absolute;
  width:100%;
  height:100%;
	background-color: #f5c28c;
	opacity: 0.1;
	filter: alpha(opacity=10);
	-moz-opacity: 0.1;
	-khtml-opacity: 0.1;
	border-radius:10px;
}
#content {
	font-weight: bold;
	width: 940px;
	/*height: 200px; test pro vetsi vysku */
	margin-left: 40px;
	color: #000;
}

Kód:

<div id="size">
    <div id="contentbg"></div>
    <div id="content">
          CONTENT
    </div>
</div>

pozn : všechny float bloky a absolute bloky uvnitř content nepřidají výšku a tak je potřeba s tím počítat

Zajímavé řešení. Na druhou stranu je hnus, že se musí zbytečně komplikovat kód kvůli jednomu zprzněnému prohlížeči, aby zůstal jednoduše udržovatelný. Elegantnější řešení je použít třeba pie.htc:

Kód:

-pie-background: rgba(245, 194, 140, 0.5);
behavior: url(pie.htc);

Používám ho už docela dlouho, ale že podporuje i rgba hodnoty jsem nějak přehlídl. Má nevýhodu v drobné prodlevě při vykreslení stránky, ovšem zpřehlednění a vyčištění kódu od všemožných hacků za to myslím stojí.

Děkuji všem za tipy.