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;}
<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>