Opacity
HTML
<div id="parent">
<div class="opacity">Прозрачный блок</div>
Контент тут тоже непрозрачен
<div>Непрозрачный блок</div>
</div>
<div id="parent_before">
То же самое, но без поддержки IE7 (в IE8 тут будет непрозрачный фон)
<div>Непрозрачный блок</div>
</div>
CSS
body {
background: url(http://behance.vo.llnwd.net/profiles/75140/projects/131911/751401233550632.jpg);
}
#parent, #parent_before {
position: relative;
width: 60%;
min-width: 200px;
padding: 20px;
margin: 20px auto;
border-radius: 10px;
}
#parent div.opacity, #parent_before:before {
content: 'Прозрачный блок';
display: block;
position: absolute;
top:0; right:0; bottom: 0; left: 0;
width: 100%;
padding:0;
background: url(http://maxcdn.thedesigninspiration.com/wp-content/uploads/2009/04/pattern-68-l.jpg);
opacity: 0.5;
filter: alpha(opacity=50);
border-radius: 10px;
z-index:-1;
}
#parent div, #parent_before div {
padding: 10px;
background: #8A97CC;
border-radius:10px;
}