Блок с прозрачной подложкой

Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.

Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить , тогда мне пришлось использовать прозрачный png.

Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.

Техника заключается в подложке прозрачного блока в основной блок, который вы хотите сделать прозрачным. Продолжение… статьи «Правильная прозрачность»

В моем случае мне пришлось использовать такой код.

HTML:

<div class="nature">
<div class="transp-back"></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>
<?php echo '<img class="nature-img" src="/i/bgs/nature'.rand(1,9).'.jpg" alt="" />' ?>
</div>

CSS:

.nature {
position: relative;
margin-bottom: 1em;
}

.nature .transp-back {
width: 530px;
height: 100px;
position: absolute;
margin: 50px;
padding: 10px;
background-color: #fff;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /* IE 5.5+*/
-moz-opacity: 0.8; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.8; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.8; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}

.nature .content {
width: 480px;
position: absolute;
padding: 70px 70px 50px 90px;
}

Больше на эту тему:

• Техника CSS: имитация абсолютного позиционирования
• Список CSS хаков для разных браузеров, IE6, IE7, IE8, FireFox, Opera, Safari