Halbtransparenter Hintergrund im IE

Mit dem Fix für eine mögliche Beeinträchtigung der Schriftqualität

by Jens Grochtdreis

HTML

<h1>Dieser Test ist nur für IE bis Version 8 (oldIE)</h1>

<div>
    <h2>Überschrift mit IE-Gradient-Filter und ohne relative Positionierung des Elternelements</h2>
</div>

<div class="halter">
    <h2>Überschrift mit IE-Gradient-Filter und mit relativer Positionierung des Elternelements</h2>
</div>

CSS

h1, h2 {
    font-family: sans-serif;
    padding: 20px 30px;
    margin-bottom: 20px;
}

h1 {
    font-size: 16px;
    color: #000;
}
div {
    font-size: 12px;
    color: #fff;
    background-color: rgba(162,0,0,0.5);

    /* Für IE8 und drunter */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7FA20000', EndColorStr='#7FA20000');
}

.halter h2 {position: relative;}

div {margin-bottom: 10px;}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

JavaScript

// Danke an @derSchepp für entscheidende Hinweise.