Ausführliche Erläuterung der Beispiele für transparente CCS-Attribute und transparente Vererbungsmethoden im Hintergrund

Transparenz kann oft zu guten visuellen Effekten auf Webseiten führen. Lassen Sie mich zunächst den CSS-Transparenzcode vorstellen, der mit Mainstream-Browsern kompatibel ist:

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Die oben genannten Attribute sind:
opacity: 0,5; Dies ist der wichtigste Wert, da es sich um einen CSS-Standard handelt.
filter:alpha(opacity=50); 0 -100, die anderen drei sind 0 bis 1.
-moz-opacity:0.5; Dies dient der Unterstützung einiger älterer Versionen des Mozilla-Browsers.
-khtml-opacity: 0,5; Dies dient der Unterstützung einiger älterer Versionen des Safari-Browsers.
CSS-Transparenzvererbungsproblem
Das CSS-Transparenzattribut beinhaltet jedoch ein Vererbungsproblem. Wenn Transparenz für das übergeordnete Element festgelegt ist, erbt das untergeordnete Element automatisch seine Transparenz, selbst wenn Sie für das untergeordnete Element eine Transparenz von 1 angeben Element, es wird ungültig sein.
Für den Fall, dass es sich bei dem Unterelement um Text handelt, besteht die Lösung im Allgemeinen darin, es in Ruhe zu lassen, solange es noch klar erkennbar ist. Ein weiterer Kompromiss besteht darin, dem Textunterelement eine relativ dunklere Farbe zuzuweisen. Mit anderen Worten: Wenn das untergeordnete Element Transparenz erbt, entspricht die resultierende Textfarbe genau Ihren Wünschen. Die Voraussetzung ist, dass diese Farbe noch die Möglichkeit hat, sich zu vertiefen, und die Farb- und Transparenzwerte müssen im Detail berechnet werden.
Es gibt auch das Sprichwort „Transparenzvererbung abbrechen“, was nicht sehr zutreffend ist. Soweit ich persönlich weiß, gibt es keine Möglichkeit, die Transparenzvererbung abzubrechen. Man kann nur sagen, dass es einige Hacks gibt, die verwendet werden können, wenn man „mehrere Elemente abdecken und nur die angegebenen Elemente transparent machen“ möchte.
Nachdem ich gesucht habe, habe ich einen guten Weg gefunden, diesen Effekt zu erzielen – eine Frage zur transparenten Vererbung. Interessierte Freunde können einen Blick darauf werfen. Das Prinzip ist sehr einfach: Fügen Sie ein leeres Element als transparente Ebene hinzu, und das Element, das nicht transparent sein möchte, aber einen Abdeckeffekt erzielen muss, ist ein Geschwisterelement. Das übergeordnete Element wird mit position:relative positioniert; die beiden untergeordneten Elemente werden mit position:absolute positioniert, um eine Abdeckung zu erreichen.
HTML-Code:

<p class="p3"><p class="p4"></p>这里文字图片都没透明度了 
<p class="p2">图片</p> 
</p>

CSS-Code

body { 
background-image: url(./105247.png); 
background-repeat: repeat; 
} 
.p2{ width:100px; height:100px; background: url(./testbok.png)} 
.p3{ width:200px; height:200px; position:relative; margin-top:10px} 
.p4{  position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}

Wenn die Höhe Ihres Außenbehälters variabel ist, dann stellen Sie einfach die Höhe von p3 auf eine ausreichende Höhe ein
Diese Methode hat einen sehr schlimmen Nachteil: Es gibt ein zusätzliches leeres p

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für transparente CCS-Attribute und transparente Vererbungsmethoden im Hintergrund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!