Прозрачный фон CSS

Прозрачный фон CSS — довольно распространенная фишка на сайтах. Многие делают такой фон, но не многие знают, как правильно его делать. Вы прекрасно знаете, что чтобы добавить прозрачность надо внести свойство opacity: 0.8, но, если мы проделаем такое в элементе, в котором присутствуют другие блоки, то получим также прозрачность и наших картинок, и нашего текста, и нашей остальной информации. А мы то этого как раз и не хотим. Что же делать?

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

<div class="fon">
<div class="menu"></div>
</div>

Допустим мы хотим сделать, чтобы наш div  c классом fon был прозрачным. И если добавим ему CSS свойство opacity — то наше меню также станет прозрачным. Для того, чтобы этого избежать. Нам нужно добавить еще один див. И код примет такой вид.

<div class="fon">
<div class="prozrachnost"></div>
<div class="menu"></div>
</div>

Как Вы видите мы добавили новый Div, при этом это пустой див, в нем ничего нет. В CSS мы пишем следующее, указывая данные свойства нашему классу прозрачности, например.

.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;
}

Собственно и все. Мы получили только прозрачный фон, а меню осталось нетронутым. Пользуйтесь данным методом, чтобы сделать прозрачный фон, но при этом не хотите, чтобы иные элементы, включенные внутрь кода, были прозрачными.

Если же у Вас возникли какие-то вопросы, то смело пишите их в комментариях к данной статье. Спасибо.