Ist die Deckkraft in einem div

7

Ist es möglich, die opacity Vererbung von einem Elternteil zu ihrem Kind div ?

zu entfernen

Beispiel

%Vor%     
X10nD 14.04.2010, 11:23
quelle

5 Antworten

16

Wie fmsf sagt, ist das nicht möglich. Wenn Sie nach einer Möglichkeit suchen, Hintergrundfarbe oder Farbe transparent zu machen, können Sie rgba ausprobieren. Dies wird in IE6 nicht unterstützt.

%Vor%     
fortysixandtwo 14.04.2010, 11:34
quelle
3

Nein, nicht streng in dem Sinne, nach dem Sie sich erkundigen. Denn was passiert, ist nicht wirklich , dass der Wert in einem traditionellen Sinn geerbt wird, aber das untergeordnete Steuerelement ist teilweise transparent als direkter Effekt in einem teilweise transparenten Container zu sein.

Sie können es in vielen Situationen umgehen.

Das wird also nicht funktionieren:

%Vor%

Aber Sie könnten so etwas tun:

%Vor%

Es gibt eine Handvoll Vorbehalte, aber das ist der einzige Weg, um zu erreichen, was Sie wollen.

In diesem Beispiel habe ich es mit einer Textzeile zu tun, und im "Elternteil" gebe ich ein   ein, das auch eine Zeile in der Höhe einnehmen wird. Wenn Ihr "Kind" größer ist, wächst der "Elternteil" nicht, weil es überhaupt kein Elternteil ist. Sie müssen eine Höhe manuell festlegen.

Sie müssen die Breite auch manuell angeben, da Sie sich mit absolut positionierten Elementen beschäftigen.

Ich werde sagen, tho, bevor Leute anfangen zu sagen, dass absolute Positionierung so eine schreckliche Weise ist, Designprobleme zu lösen, dass es eine Gelegenheit gibt, wo ich denke, dass es vollkommen legitim ist: wenn auch mit position: relative als in der arbeitend Beispiel oben, und um ein Element basierend auf das und nicht auf dem gesamten Fenster absolut zu positionieren.

    
David Hedlund 14.04.2010 11:37
quelle
3

Nein, du kannst nicht

Opazität wird vollständig von den Vätern div. geerbt.

Bedeutung:

%Vor%

Bearbeiten:

Wenn Sie es betrügen möchten, aber den "Workflow" Ihres transparenten Vaters beibehalten. Sie können eine Kopie (in Größe und Position) des Vater-Div auf den Vater legen.

%Vor%

Nun, anstatt dein nicht transparentes HTML auf den Vater zu setzen, lege es auf die Kopie.

    
fmsf 14.04.2010 11:27
quelle
2

Erstellen Sie ein transparentes PNG, und wenden Sie es als background der übergeordneten Klasse anstelle von opacity an.

Eine Demo finden Sie im Twitter-Layout (speziell im Hintergrund / Rahmen um den Hauptinhalt).

    
Brynner Ferreira 07.05.2012 00:40
quelle
0

Sie können die Deckkraft-Eltern-Kind-Vererbung vermeiden, aber es wird hacky sein: Ссылка

Es gibt auch ein Plugin, das den Job erledigt: thatsNotYoChild.js .

Mit HTML5 können Sie auch RGBA verwenden, um eine Hintergrundfarbe festzulegen, deren Transparenz (Alpha) nicht übernommen wird.

Beispiel:

%Vor%     
Benny Neugebauer 28.02.2014 13:33
quelle

Tags und Links