Latest web development tutorials

CSS Bild transparent / opak

Mit CSS ist einfach ein transparentes Bild zu erstellen.

Hinweis: CSS Opazität Eigenschaft Teil der W3C CSS3 Empfehlungen ist.


Beispiele

Weitere Beispiele

Erstellen Sie ein transparentes Bild - Hover - Effekt

Erstellen Sie ein Textfeld hat einen transparenten Hintergrund Bild


Beispiel 1 - Erstellen Sie ein transparentes Bild

Transparenz in der CSS3 - Eigenschaft istOpazität.

Zunächst werden wir Ihnen zeigen, wie ein transparentes Bild mit CSS zu erstellen.

Normales Bild

klematis

Das gleiche Bild mit der Transparenz:

klematis

Betrachten Sie das folgende CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

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.


Beispiel 2 - Bild Transparenz - Hover-Effekt

Bewegen Sie die Maus über das Bild:

klematisklematis

CSS-Stil:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

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.


Beispiel 3 - Transparent Box Text

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:

<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(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); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

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.