CSS Opacity nur für Hintergrund, nicht für Text und Bild

[standi]

Hallo Leute,

ich habe einen div "Container". Dieser Container hat eine andere Hintergrundfarbe als der Rest. Ich habe für diesen Container nun folgendes definiert:

max-width: 900px;
background-color: #000000;
opacity: 0.50;
filter: alpha(opacity=50);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #FFFFFF;

Mein Problem ist nun, das egal, was auf diesem Container ist, alles darin mit opacity 0.50 durchlässig wird. Kann ich dies irgendwie vermeiden? Ich will eigentlich nur, dass background-color: #000000 durchscheint und der Rest darauf undurchlässig ist :-)

Viele Grüße

 

[Daaron]

Opacity wirkt nun einmal auf ein Element und all seine Kinder. Dagegen kannst du nichts machen.
Das Zauberwort hier heißt CSS3 RGBA-Farben.

background-color: rgba(0,0,0,0.5);

kann jeder moderne Browser. Für IE<=8 musst du eine 1px große halbtransparente PNG machen und gekachelt in den Background legen... natürlich per Conditional Comment, damit die fähigen Browser den Rotz dann nicht mit laden.
Oh... und der IE6 wird trotzdem scheitern, er kann keine PNGs, bzw. nicht richtig *G*

 

[Kraligor]

Mach' doch in den Container noch ein Element, das nur die Hintergrundfarbe und deren Opacity definiert.

 

[standi]

Hi,

@daaron
danke, werde ich bei Gelegenheit mal ausprobieren

Mach' doch in den Container noch ein Element, das nur die Hintergrundfarbe und deren Opacity definiert.

Das habe ich nicht ganz verstanden, bzw. so wie daaron sagt, erben doch die Kindselemente mit?

<div class="container">
Text
Bild
<div class="bla">
</div>
</div>


Ich habe da einen Link gefunden. Müsste mal schauen, wie ich das bei mir so hinbiege:
http://www.highresolution.info/weblog/entry/transparente_hintergruende_mit_css/

 

[Kraligor]

Ich denke an folgende Konstellation:

<div class="container">
<p>bla</p>
<div class="background">
</div>
</div>

Und für background eben die Opacity einstellen. Kann aber gut sein, dass es nicht funktioniert, hab mich schon lange nicht mehr mit der Materie befasst..

 

[Daaron]

Ja. Lieber semantischen Blödsinn schreiben als seine User zu animieren, endlich n aktuellen Browser zu verwenden... So n Mumpitz.
Gerade ne 1px-PNG geht auf allen Browsern außer IE6...

Man sollte im HTML-Content keine Hack-Elemente einbauen, nur semantisch wertvollen Content. Selbst die üblichen <div style="clear:both"></div> für Floats sollte man vermeiden

 

[Mrdk]

Ich bin zwar auch kein Freund von DIV-Suppen, aber zur Semantik tragen sie nichts bei.
Wenn es sich vermeiden lässt, ist es natürlich hübscher, wenn man ein tag mit semantischer Bedeutung verwenden kann wie beispielsweise <article> (sofern das Dokument in HTML5 geschrieben wird).

Zur Problemlösung ist der Vorschlag von Daaron in meinen Augen der anständigste.
Wenn die Transparenz im IE6 unbedingt funktionieren muss, gäbe es noch pngFix.