CSS Transparenz (Transparenz)

Die CSS-Attribut opacity bestimmt die Transparenz eines Elements. Das Attribut opacity spezifiziert die Transparenz eines Elements. Mit anderen Worten, das Attribut opacity bestimmt den Grad, zu dem das Hintergrundbild eines Elements abgedeckt wird.

Cross-Browser Transparency

Jetzt ist Transparenz (Opacity) ein CSS3Ein Teil der Norm, aber es existiert schon lange. Allerdings haben ältere Browser unterschiedliche Methoden, um Deckung oder Transparenz zu spezifizieren.

Firefox, Safari, Chrome, Opera und IE9in der CSS-Transparenz

Dies ist die neueste Syntax der CSS-Transparenz in allen aktuellen Browsern.

p {
　　　　opacity: 0.7;
}

Die obige Stilerlaubnis macht den Absatz-Element70% undurchsichtig (oder30% transparent).

Der Wertebereich der opacity-Eigenschaft beträgt von 0.0 bis1.0. Setzen Sie opacity zu1; macht das Element vollständig nicht transparent (d.h. 0% transparent), opacity: 0; macht das Element vollständig transparent (d.h.100% transparent).

Internet Explorer 8und Implementierungsmethoden der CSS-Transparenz in Versionen niedriger als

Internet Explorer 8und frühere Versionen unterstützen nur das von Microsoft unterstützte Attribut "Alpha-Filter", um die Transparenz der Elemente zu spezifizieren.

p {
　　　　filter: alpha(opacity=50);
　　　　zoom:　1;　　/*　Fix für IE7　*/
}

CSS-Transparenz für alle Browser kompatibel

Kombiniert diese beiden Schritte, erhalten Siealle BrowservonTransparenzcode.

p {
　　　　opacity: 0.5;　　/*　Transparenz für moderne Browser　*/
　　　　filter: alpha(opacity=50);　　/*　Transparenz für IE8　und niedriger　*/
　　　　zoom:　1;　　/*　Fix für IE7　*/
}

Transparenz von CSS-Bildern

Sie können auch transparente Bilder mit CSS Opacity erstellen.

Die drei Bilder im folgenden Bild sind alle aus derselben Quelle. Der einzige Unterschied zwischen ihnen ist ihre Transparenz.

Ändern Sie die Transparenz des Bildes beim Mausüberfahren

Nachfolgender Beispiel zeigt die gängigen Anwendungen der Transparenz von CSS-Bildern, bei denen sich die Transparenz des Bildes ändert, wenn der Benutzer den Mauszeiger auf das Bild bewegt.

Bewegen Sie den Mauszeiger über das Bild, um den Effekt zu sehen.

Text in transparentem Rahmen

Wenn Sie Transparenz auf einem Element verwenden, wird nicht nur der Hintergrund des Elements transparent, sondern auch alle nachfolgenden Elemente werden transparent. Wenn der Wert der Transparenz höher wird, wird der Text im transparenten Element schwer lesbar.

Um dies zu verhindern, können Sie transparente PNG-Bilder verwenden oder den Textblock außerhalb eines transparenten Rahmens platzieren und dann mit negativAbstandoderCSS-PositionierungStellen Sie es visuell in den Hintergrund.

div {
　　　　float: left;
　　　　opacity: 0.7;
　　　　border:　1px solid #949781;
}
p {
　　　　float: left;
　　　　position: relative;
　　　　margin-left:　-400px;
}

Transparenz in CSS mit RGBA verwenden

Abgesehen von RGB, CSS3Eine neue Methode RGBA wurde auch eingeführt, um eine Farbe zu spezifizieren, die alpha-Transparenz als Teil des Farbtons enthält. RGBA steht für Red Blue Green Alpha.

Die RGBA-Angabe ist eine sehr einfache Methode, um die Transparenz der Farbe zu setzen.

div {
　　　　background: rgba(200,　54,　54, 0.5);
}
p {
　　　　color: rgba(200,　54,　54, 0.25);
}

bedeutet, dass der Farbton vollständig transparent ist, während der Wert-255) bedeutet, dass der Farbton vollständig transparent ist, während der Wert-255) bedeutet, dass der Farbton vollständig transparent ist, während der Wert-255) bedeutet, dass der Farbton vollständig transparent ist, während der Wert1Werte der alpha-Transparenz zwischen (0 macht den Farbton vollständig transparent, während der Wert1um ihn vollständig undurchsichtig zu machen).

Eine wichtige Eigenschaft, die bei der RGBA-Transparenz berücksichtigt werden muss, ist-Fähigkeit, die Transparenz eines einzigen Farbt-ons zu spezifizieren. Mit RGBA können wir den Textcolor des Elements transparent machen und den Hintergrund vollständig beibehalten.

oder die Textfarbe ignorieren und nur die Transparenz des Hintergrunds ändern.

Sie werden sehen, dass RGBA verwendet werden kann, um einfach einen einzigen Farbton zu spezifizieren, anstatt die Undurchsichtigkeit des gesamten Elements zu ändern. Es wird jedoch immer empfohlen, eine Ersatzfarbe für Browser zu definieren, die keine RGBA-Farben unterstützen.

RGBA-Balkenfarbe

Keine Browser unterstützen RGBA-Farben. Aber Sie können anderen Browsern andere Optionen bieten, z.B. einfache Farben oder transparente PNG-Bilder.

p {
　　　　/*　Fallback für Webbrowser, die nicht39;t Unterstützung für RGBA　*/
　　　　background: rgb(0, 0, 0);
　　　　/*　RGBa mit 0.5　Durchsichtigkeit　*/
　　　　background: rgba(0, 0, 0, 0.5);
}