Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность 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;
}