Detaillierte Erläuterung der CSS-Transparenzeigenschaft (Code)

Dieser Artikel enthält eine detaillierte Erklärung der transparenten CSS-Eigenschaften und einen Hack zur Lösung der Hintergrundtransparenzvererbung. Wenn Sie einen transparenten CSS-Hintergrund verwenden, kann Ihnen dieser Artikel bei der Lösung vieler Inkompatibilitätsprobleme helfen.

Transparenz führt häufig zu guten Ergebnissen Für visuelle Effekte auf Webseiten stellen wir zunächst transparenten CSS-Code bereit, der mit gängigen Browsern kompatibel ist:

Der Code lautet wie folgt:

.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, da es sich um einen CSS-Standard handelt.

filter:alpha(opacity=50); can Der Wert liegt zwischen 0 und 100, die anderen drei zwischen 0 und 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-Transparenz-Vererbungsproblem:

Die CSS-Transparenzeigenschaft beinhaltet ein Vererbungsproblem. Wenn Transparenz für das übergeordnete Element festgelegt ist, erbt das untergeordnete Element automatisch seine Transparenz, auch wenn Sie die Transparenz festlegen Das erneute Angeben einer Transparenz von 1 ist ebenfalls ungültig.

Für den Fall, dass es sich bei dem Unterelement um Text handelt, besteht meine Lösung im Allgemeinen darin, es in Ruhe zu lassen, solange es noch deutlich zu sehen 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. Es kann nur gesagt werden, dass es einige Hacks gibt, die verwendet werden können, wenn Sie „mehrere Elemente abdecken und nur die angegebenen Elemente transparent machen“ erreichen möchten.

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 lautet wie folgt:

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

CSS-Code lautet wie folgt:

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, stellen Sie einfach die ein Höhe von p3 Gerade genug Höhe.
Diese Methode hat einen sehr schlimmen Nachteil: Es gibt ein zusätzliches leeres p.

Das Obige ist der detaillierte Inhalt von Detaillierte Erläuterung der CSS-Eigenschaft (Code) Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!