Прозрачный фон CSS — довольно распространенная фишка на сайтах. Многие делают такой фон, но не многие знают, как правильно его делать. Вы прекрасно знаете, что чтобы добавить прозрачность надо внести свойство opacity: 0.8, но, если мы проделаем такое в элементе, в котором присутствуют другие блоки, то получим также прозрачность и наших картинок, и нашего текста, и нашей остальной информации. А мы то этого как раз и не хотим. Что же делать?
Решение данной задачи весьма простое. Возьмем для примера следующий код.
|
1 2 3 |
<div class="fon"> <div class="menu"></div> </div> |
Допустим мы хотим сделать, чтобы наш div c классом fon был прозрачным. И если добавим ему CSS свойство opacity — то наше меню также станет прозрачным. Для того, чтобы этого избежать. Нам нужно добавить еще один див. И код примет такой вид.
|
1 2 3 4 |
<div class="fon"> <div class="prozrachnost"></div> <div class="menu"></div> </div> |
Как Вы видите мы добавили новый Div, при этом это пустой див, в нем ничего нет. В CSS мы пишем следующее, указывая данные свойства нашему классу прозрачности, например.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.prozrachnost { opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; background-color:#000000; width:340px; height:1500px; position:absolute; top:0px; left:0px; z-index:-1; } |
Собственно и все. Мы получили только прозрачный фон, а меню осталось нетронутым. Пользуйтесь данным методом, чтобы сделать прозрачный фон, но при этом не хотите, чтобы иные элементы, включенные внутрь кода, были прозрачными.
Если же у Вас возникли какие-то вопросы, то смело пишите их в комментариях к данной статье. Спасибо.
