Transparenz nicht auf Text anwenden, nur auf Hintergrundfarbe

[jackflash]

Hallo zusammen,

bei einem Div möchte ich die Hintergrundfarbe transparent machen, so dass der Hintergrund durchschimmert. Das funktioniert auch gut.

Nun wird aber auch der Text im DIV transparent dargestellt. Ich habe versucht, den Text in einen neuen DIV zu packen und dort die Transparenz auf 100% zu setzen, hat aber nicht funktioniert.


Hier mein Quellcode:

html, body {  height: 100%;  width: 100%;  padding: 0;  margin: 0;}
#backg {  z-index: -999;  min-height: 100%;  min-width: 1024px;  width: 100%;  height: auto;  position: fixed;  top: 0;  left: 0;}
#page { margin-left: 50px; margin-top: 60px; padding:15px; border:1px #f32111 solid; position: relative;  width: 450px;  min-height: 400px;  color: #fff; background:#553322; -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;
filter:alpha(opacity=50);}
#subp { position:relative;
-moz-opacity:1; -khtml-opacity:1; opacity:1; 
filter:alpha(opacity=100); color:#000000;}
#logo {font-size: 200%; color:#ffffff; }
#nav li,ul {display: inline; margin-right:15px; padding:0px;}

<img src="bg.jpg" id="backg" />   
 <div id="page">
 <div id="logo">Titel</div>
 <div id="subp">
 <div id="nav"><ul><li>Menü1</li><li>Menü2</li><li>Menü3</li><li>Menü4</li></ul></div>
 <div id="content"><p>Und hier kommt der Text</p></div></div></div>

Im Anhang noch ein Screenshot zur Verdeutlichung.




Vielen Dank für eure Hilfe!

 

[alogheo]

opacity bewirkt sich auf alle Kind-elemente aus. Das einzige, was du machen könntest, waäre ein transparentes Hintergrundbild zu nehmen oder du verwendest rgba-Fraben als Hintergrundfarben (RGBa Browser Support | CSS-Tricks)

 

[hltrskltr]

Hier mal ein allg. Beispiel wie du es auch realisieren könntest. (Habs jetzt auf die schnelle nicht überprüft, sollte aber klappen... hoffentlich.)

<div class="hintergrund">
   <div class="text">
      ...
   </div>
</div>

div.hintergrund {position:relative; opacity:0.50; background:#000;}
div.text {position:absolute; top:0; bottom:0; left:0; right:0; z-index:10; opacity:1.00;}

 

[threadi]

Nein, das wird nicht klappen da man Transparenz für innenliegende Elemente nicht wieder aufheben kann.

 

[janm]

<div class="transparenterhintergrund">
Text
</div>

.transparenterhintergrund{
     background:rgba(255,0,0,0.7);
}