2010-05-11 13 views
7

Wenn ich ein div habe, das sich wie eine Box verhält, mache ich es mit 10% Opazität echt sexy. Wie kann ich dem entgegenwirken, da alles im div auch die Opazität erhält? Lets sagen, ich habe eine Box (div) mit einem 1px Rahmen und Text, setzen Opazität auf es wird es schlecht aussehen und ich möchte nur Deckkraft auf dem Hintergrund.gegen eine div Opazität?

Antwort

4

Sie könnten ein halbtransparentes PNG-Bild für den Hintergrund des Elements verwenden. Sie benötigen ein Update wie Supersleight für IE6-Unterstützung.

+0

wegen all der Browsertypen ich denke, ein PNG ist die beste Wahl, wenn ich nicht eine lib wie jquery oder etwas verwenden würde (wenn es die Funktion hat Ich brauche). Danke allen für alle Antworten! – Jason94

6

Der Inhalt eines Elements mit Deckkraft erbt diese Deckkraft. Sie müssen es in zwei Teile aufteilen: den Hintergrund und den Inhalt. Positioniere den Inhalt absolut über dem Hintergrund. Ihr Inhalt darf nicht innerhalb des Opazitätselements sein.

+0

Das ist richtig, wenn Sie über "Opazität" die CSS-Eigenschaft sprechen, aber es gibt mehrere andere Möglichkeiten, den Effekt zu erzielen. – e100

11

Dies ist, wie Sie nur Opazität auf Hintergrundfarben anwenden können, und nicht auf das gesamte Element und seine Kinder:

background: rgba(0,0,0, 0.5) //gives you a black background with 50% opacity 

Sie können es hier testen: http://jsfiddle.net/ypaTH/

gab es eine ähnliche Frage hier: How to give cross browser transparency to element's background only? (mit IE-Version)

+0

Dies (obwohl es die 'richtige' Lösung und ein CSS3-Feature ist) funktioniert nur in modernen Browsern wie Chrome, Firefox, Safari. –

+0

können Sie die IE-Version in der anderen Antwort finden, die ich auf dem vorherigen toppic gab. – meo

+0

und Opazität funktioniert nicht in IE zu, so dass ich es nicht kümmern würde – meo