Das beste CSS Bild transparent / opak-Tutorial im Jahr 2024. In diesem Tutorial können Sie Weitere Beispiele,Beispiel 1 - Erstellen Sie ein transparentes Bild,Beispiel 2 - Bild Transparenz - Hover-Effekt,Beispiel 3 - Transparent Box Text, lernen
Mit CSS ist einfach ein transparentes Bild zu erstellen.
Hinweis: CSS Opazität Eigenschaft Teil der W3C CSS3 Empfehlungen ist.
Erstellen Sie ein transparentes Bild - Hover - Effekt
Erstellen Sie ein Textfeld hat einen transparenten Hintergrund Bild
Transparenz in der CSS3 - Eigenschaft istOpazität.
Zunächst werden wir Ihnen zeigen, wie ein transparentes Bild mit CSS zu erstellen.
Normales Bild
Das gleiche Bild mit der Transparenz:
Betrachten Sie das folgende CSS:
IE9, Firefox, Chrome, Opera und Safari-Browser verwendet die Transparenzeigenschaften des Bildes kann undurchsichtig werden. Opazität Eigenschaftswert von 0,0 bis 1,0. Kleinere Werte machen das Element transparenter.
IE8 und frühere Versionen verwenden Filter: alpha (Opazität = x). X kann Werte von 0 - 100. Niedrigere Werte machen das Element transparenter.
Bewegen Sie die Maus über das Bild:
CSS-Stil:
Der erste Block ist der CSS-Code in Beispiel 1, und dergleichen. Darüber hinaus haben wir auch, was passiert, wenn der Benutzer die Maus über eines der Bilder bewegt. In diesem Fall, wenn der Benutzer die Maus über das Bild bewegt, hoffen wir, dass das Bild klar ist.
Dies istCSS: Opazität = 1.
IE8 und früherEinsatz: Filter: alpha (Opazität = 100 ).
Wenn die Maus aus dem Bildzeiger weg, wird das Bild wieder Transparenz sein.
Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box. Der Text in der transparenten Box.
Der Quellcode ist wie folgt:
Zuerst erstellen wir eine feste Höhe und Breite des div-Elements mit einem Hintergrundbild und Grenze. Dann erstellen wir eine kleinere div-Elemente innerhalb des ersten div. DIV haben auch eine feste Breite, Hintergrundfarbe, Rand - und es ist transparent. Im Inneren des transparenten div, fügen wir einige Text innerhalb des P-Elements.