CSS-BilderTransparenz/Deckkraft

Mit CSS ist es einfach, transparente Bilder zu erstellen.

Hinweis:Die CSS-Eigenschaft opacity ist Teil der W3C-CSS3-Empfehlung.

Examples

Weitere Beispiele

Eine transparente Box mit Text und einem Hintergrundbild erstellen

Beispiel 1 - Ein transparentes Bild erstellen

Die CSS3-Eigenschaft opacity istopacity。

Zuerst zeigen wir Ihnen, wie Sie mit CSS ein transparentes Bild erstellen.

Normales Bild

klematis

Dasselbe Bild mit Transparenz:

klematis

Siehe das CSS unten:

img { opacity:0.4; filter:alpha(opacity=40); /*IE8 und frühere Versionen*/ }

IE9, Firefox, Chrome, Opera und Safari verwenden die Eigenschaft opacity, um Bilder transparent zu machen. Der Wert der Eigenschaft opacity reicht von 0.0 bis 1.0. Je kleiner der Wert, desto transparenter wird das Element.

IE8 und frühere Versionen verwenden filter: alpha (opacity= x). Der Wert von x kann von 0 bis 100 reichen. Niedrigere Werte machen das Element transparenter.

Beispiel 2 - Bildtransparenz - Hover-Effekt

Fahren Sie mit der Maus über das Bild:

klematisklematis

CSS-Stile:

img { opacity:0.4; filter:alpha(opacity=40); /*IE8 und frühere Versionen*/ } img:hover { opacity:1.0; filter:alpha(opacity=100); /*IE8 und frühere Versionen*/ }

Der erste CSS-Block ähnelt dem Code in Beispiel 1. Darüber hinaus haben wir hinzugefügt, was passiert, wenn der Benutzer mit der Maus über eines der Bilder fährt. In diesem Fall möchten wir, dass das Bild klar ist, wenn der Benutzer mit der Maus über das Bild fährt.

Dieses CSS ist:opacity=1.

IE8 und frühere Versionen verwenden:filter:alpha(opacity=100).

Wenn der Mauszeiger sich vom Bild entfernt, erhält das Bild seine Transparenz zurück.

Beispiel 3 - Text in einer transparenten Box

Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box. Dieser Text befindet sich in einer transparenten Box.

Der Quellcode lautet wie folgt:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>
div.background { width:500px; height:250px; background:url(https://www.example.com/images/klematis.jpg) repeat; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); /*IE8 und frühere Versionen*/ } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; }
</style> </head> <body> <div class="background"> <div class="transbox"> <p>Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box. Diese Texte sind in einer transparenten Box.</p> </div> </div> </body> </html>

Zuerst erstellen wir ein div-Element mit einer festen Höhe und Breite, mit einem Hintergrundbild und einem Rahmen. Dann erstellen wir ein kleineres div-Element innerhalb des ersten div. Dieses div hat ebenfalls eine feste Breite, eine Hintergrundfarbe und einen Rahmen – und es ist transparent. Innerhalb des transparenten div fügen wir etwas Text in einem p-Element hinzu.

Weitere Erweiterungen