Elemente auf Websites transparent gestalten
Auf Websites haben die Elemente standardmäßig eine Deckkraft von 100%. Man kann die Elemente mit einer Transparenz versehen, sodass die Deckkraft geringer ist und der Hintergrund hindurch scheint.
Für die Transparenz kann die CSS-Eigenschaft opacity verwendet werden. Die Deckkraft wird dabei nicht in Prozent angegeben, sondern als numerischer Wert mit Punkt statt Komma und ohne Einheit. Wenn man beispielsweise die Deckkraft auf 50% einstellen möchte, gibt man als Wert 0.5 ein. Die Syntax ist auf der folgenden Abbildung ersichtlich.
Bis Internet Explorer 8 wurde die Eigenschaft opacity nicht unterstützt. Stattdessen wurde für die Transparenz filter bzw. -ms-filter (in IE8) verwendet. Möchte man diese Versionen auch unterstützen, kann man den CSS-Code wie folgt eingeben.
/* 80% Deckkraft */
.selektor1 {
filter: alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 0.8;
}
/* 60% Deckkraft */
.selektor2 {
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
opacity: 0.6;
}
/* 40% Deckkraft */
.selektor3 {
filter: alpha(opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
opacity: 0.4;
}
/* 20% Deckkraft */
.selektor4 {
filter: alpha(opacity=20);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
opacity: 0.2;
}<img src="bild.jpg" class="selektor1">
<img src="bild.jpg" class="selektor2">
<img src="bild.jpg" class="selektor3">
<img src="bild.jpg" class="selektor4">Der Code würde im Browser folgendes bewirken.
Beim Wert 0 wäre das Element komplett transparent und der Hintergrund voll sichtbar.