Nachdem Microsoft Anfang des Jahres den Support für eine Reihe älterer Versionen des Internet Explorers eingestellt hat, und man infolgedessen diese selbst auch nicht mehr berücksichtigen muss, ist in mancher Hinsicht das Coden von Webseiten einfacher geworden. Ein Beispiel hierfür ist das Erstellen von halbtransparenten Overlays.
Mit der CSS-Eigenschaft opacity lässt sich zwar die Deckkraft eines Containers definieren, dies betrifft dann aber nicht nur dessen Hintergrund-, sondern auch dessen Text-Farbe.
div#overlay-1 {
width: 160px;
height: 53px;
padding: 20px;
background-color: #000;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
color: #fff;
}
<div id="overlay-1">
TEST
</div>
Der Hintergrund des Eltern-Containers würde auch bei einem Text mit weißer Schriftfarbe durchschimmern, was die Lesbarkeit beeinträchtigen kann:
Als etwas umständlichen Workaround konnte man Hintergrund und Text in zwei Geschwister-Container auslagern und diese übereinanderlegen, wobei nur der erste Container als halb-transparent definiert wurde:
/* obsolete method */
div#overlay-2 {
position: relative;
}
div#overlay-2 div.background {
width: 200px;
height: 93px;
background-color: #000;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
}
div#overlay-2 div.text {
position: absolute;
top: 0;
width: 160px;
height: 53px;
padding: 20px;
color: #fff;
}
<div id="overlay-2">
<div class="background"></div>
<div class="text">
TEST
</div>
</div>
Das Ergebnis sah dann schon besser aus:
Alternativ konnte man auch eine halbtransparente PNG-Datei als Hintergrund verwenden.
Wenn der Internet Explorer 8 nicht mehr unterstützt werden braucht, sind solche Verrenkungen allerdings nicht mehr notwendig. Man definiert den Hintergrund dann einfach mit rgba():
div#overlay-3 {
width: 160px;
height: 53px;
padding: 20px;
background: rgba(0, 0, 0, .5);
color: #fff;
}
<div id="overlay-3">
TEST
</div>
Der ersten drei Werte entsprechen wie bei rgb() den RGB-Farbwerten in dezimaler Schreibweise, der vierte Wert gibt (analog zu opacity) die Deckkraft an