Vergleich von rgba und opacity

by Jens Grochtdreis

HTML

<h1 class="notrans">Eine Überschrift ohne Transparenz - zum Vergleich</h1>
<h1 class="transparenz1">Überschrift mit opacity - die Transparenz wirkt sich auf Hintergrund- und Vordergrundfarbe aus.</h1>
<h1 class="transparenz2">Überschrift mit rgba - die Transparenz bleibt beim Hintergrund.</h1>

    <div class="halter">
        <img src="http://lorempixel.com/400/200" alt="" />
        <div class="text transparenz1">Transparenz mit opacity</div>
    </div>
    <div class="halter">
        <img src="http://lorempixel.com/400/200" alt="" />
        <div class="text transparenz2">Transparenz mit rgba</div>
    </div>

CSS

h1 {
    font-family: sans-serif;
    font-size: 25px;
    padding: 20px 30px;
    color: #000;
    margin-bottom: 20px;
}

.notrans { background-color: rgb(162,0,0)}

.transparenz1 {
    background-color: rgb(162,0,0);
    opacity: 0.5;
    /* Für IE8 und drunter */    
    filter:  progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

.transparenz2 {
    background-color: rgba(162,0,0,0.5);
    
/* Für IE8 und drunter */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7FA20000', EndColorStr='#7FA20000');
}

div.halter {position: relative; margin-bottom: 10px;}
div.text {position: absolute;bottom: 5px;left:0;padding: 10px;color: #fff;font-weight: bold;}
/* 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;}