Я создал тот эффект на свой блог Код Landman .
то, Что я сделал, было
#Header {
position: relative;
}
#Header H1 {
font-size: 3em;
color: #00FF00;
margin:0;
padding:0;
}
#Header H2 {
font-size: 1.5em;
color: #FFFF00;
margin:0;
padding:0;
}
#Header .Background {
background: #557700;
filter: alpha(opacity=30);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.3;
zoom: 1;
}
#Header .Background * {
visibility: hidden; // hide the faded text
}
#Header .Foreground {
position: absolute; // position on top of the background div
left: 0;
top: 0;
}
<div id="Header">
<div class="Background">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div class="Foreground">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</div>
важная вещь, что каждое дополнение/поле и содержание должны быть тем же в обоих.Background как.Foreground.
Я использую прозрачный для альфы PNG для этого:
div.semi-transparent {
background: url('semi-transparent.png');
}
Для IE6, необходимо было бы использовать PNG, фиксируют ( 1 , 2 ), все же.