mit CSS undurchsichtigem Text in einem transparenten div außer Kraft setzt

Question

ich Text in einem transparenten div keine Opazität zu machen versuchen sein, auch bekannt als völlig schwarz:

<div style="opacity:0.6;background:#3cc;"> 
    <p style="background:#000;opacity:1">This text should be all black</p> 
</div> 

Ist das möglich, mit nur CSS zu tun?

Vielen Dank im Voraus

Answer 1

Die untergeordneten Elemente erben die Deckkraft. Was Sie tun könnten, ist, die <p> außerhalb des undurchsichtigen div zu positionieren und einen negativen Rand festzulegen, um es darüber zu bewegen.

Ich bin oft auf dieses Problem gestoßen und habe es normalerweise so gelöst. Problem ist nur, wenn Sie dynamischen Inhalt haben und das div erweitert werden muss.

Answer 2

Der einfachste Weg ist es, den Hintergrund des übergeordneten div mit einer Undurchsichtigkeit/alpha stylen:

div { 
    background: #fff; /* for browsers that don't understand the following rgba rule */ 
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */ 
} 

Dies ist jedoch nicht kompatibel mit IE.

Für IE> = 7 Kompatibilität, könnten Sie verwenden:

div { 
    background-image: url('path/to/partially_transparent.png'); 
    background-position: 0 0; 
    background-repeat: repeat; 
} 

Ich erinnere daran, dass IE < 7 eine proprietäre Filteroption hat, aber ich fürchte, ich kann mich nicht erinnern, wie es funktioniert. Also habe ich jeden Versuch, es zu beschreiben/zu beschreiben, weggelassen. Wenn ich eine nützliche Referenz finden kann, werde ich sie später hinzufügen.

Wie von easwee vermerkt, wird die Deckkraft von enthaltenen Elementen geerbt, weshalb Sie sie nicht überschreiben können, und deshalb bevorzuge ich den Ansatz background-color/background-image.

Answer 3

Besteht der Hintergrund aus einer Farbe? Wenn dies der Fall ist, können Sie auch RGBa verwenden, um eine transparente Hintergrundfarbe für div auszuwählen, die nicht von den untergeordneten Elementen geerbt wird. Lesen Sie RGBa Browser Support für weitere Informationen, eine Problemumgehung für IE und another solution.

Wenn der Hintergrund der div nicht solide ist, können Sie eine transparente PNG als Hintergrund verwenden. Denken Sie daran, AlphaImageLoader in IE6 (und 5.5) zu verwenden.