Erstellen von transparenten Bildern mit CSS ist einfach.
Die CSS - opacity Eigenschaft ist ein Teil der CSS3 - Empfehlung.
Beispiel 1 - Anlegen einer transparenten Bild
Die CSS3 - Eigenschaft für Transparenz ist opacity .
Zuerst werden wir Ihnen zeigen, wie ein transparentes Bild mit CSS zu erstellen.
Regelmäßige Bild:
Das gleiche Bild mit der Transparenz:
Schauen Sie sich die folgenden CSS:
Beispiel
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Versuch es selber " Die opacity Eigenschaft kann nehmen einen Wert von 0,0 bis 1,0. Der niedrigere Wert, desto transparenter.
IE8 und frühere Verwendung filter:alpha(opacity=x) . Die x kann einen Wert annehmen von 0 - 100. Ein niedrigerer Wert das Element transparenter macht.
Beispiel 2 - Bild Transparenz - Hover-Effekt
Maus über die Bilder:
Die CSS sieht wie folgt aus:
Beispiel
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 */
}
Versuch es selber " Die erste CSS-Block ist ähnlich dem Code in Beispiel 1. Zusätzlich haben wir hinzugefügt, was passieren soll, wenn ein Benutzer über eines der Bilder schwebt. In diesem Fall wollen wir das Bild nicht transparent sein, wenn der Benutzer darüber bewegt. Die CSS hierfür ist opacity:1; .
Wenn der Mauszeiger aus dem Bild weg bewegt, wird das Bild wieder transparent sein.
Beispiel 3 - Text im Transparent-Box
Dies ist ein Text, der in der transparenten Box platziert wird.
Der Quellcode sieht wie folgt aus:
Beispiel
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
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.</p>
</div>
</div>
</body>
</html>
Versuch es selber " Zuerst erstellen wir ein <div> Element (class="background") mit einem Hintergrundbild und eine Grenze. Dann haben wir ein anderes erstellen <div> (class="transbox") innerhalb des ersten <div> . Die <div class="transbox"> haben eine Hintergrundfarbe und eine Grenze - das div transparent ist. Im Inneren des transparenten <div> , fügen wir einen Text in einem <p> Element.