Прозрачность с помощью CSS
Иногда возникает необходимость сделать прозрачный фон для определённого блока на странице. Добиться данного эффекта можно созданием прозрачного фонового рисунка в формате *.png и установив его через свойство background: url(“./images/fon.png”);.
Используем свойство OPACITY
Зачем такие сложности, если это можно сделать с помощью CSS. Давайте создадим на странице основной блок(page) и вложенный блок(block), которому зададим прозрачность. Кроссбраузерность достигается следующим образом: свойство для Internet Explorer – filter:alpha(opacity=50) (значение прозрачности в диапазоне от 0 до 100), для браузеров с поддержкой CSS3 стандарта – opacity:0.5 (число в диапазоне от 0.0 до 1.0).
HTML код:
<html>
<head>
<title>Полупрозрачный элемент</title>
<style type="text/css">
div.page {
margin:0 auto;
width:450px;
height:300px;
background:url(../images/3a0fdf3dc1.jpg) no-repeat; border:2px solid #555555
}
div.block {
width:260px;
height:140px;
margin-top:79px;
margin-left:94px;
background-color:#ffffff; border:1px solid #333333;
/* Internet Explorer */
filter:alpha(opacity=50);
/* CSS3 стандарт */
opacity:0.5
}
div.block p {
margin:47px 0 0 10px;
font-weight:bold; color:#000000;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<div class="block">
<p>Прозрачный фон для блока.</p>
</div>
</div>
</body>
</html>
Результат:
Прозрачный фон для блока
Как Вы заметили, прозрачность распространяется на все дочерние элементы <p>Прозрачный фон для блока</p> в DIV с классом block и они не могут превысить значение прозрачности своего родителя. Т.е., всё что находится в данном блоке становится прозрачным. Что делать, если надо оставить прозрачный фон только у дива?
Используем свойство BACKGROUND-COLOR
Нам необходимо внести некоторые изменения в таблицу стилей CSS, а именно заменить для блока DIV с классом block свойство opacity на свойство background-color.
div.block {
width:260px;
height:140px;
margin-top:79px;
margin-left:94px;
border:1px solid #333333;
/* прозрачный фон только DIV.block */
background-color: rgba(255, 255, 255, 0.5); /* Цвет фона, прозрачность 0.5*/
}
Результат:
Прозрачный фон для блока
В выше приведённом примере используется для цвета и фона формат RGBA. Где, первые три буквы расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал (a) и задает прозрачность элемента от 0.0 до 1.0.
background-color: rgba(r, g, b, a);
В скобках вместо букв ставится значение компонента цвета, его можно посмотреть в любом графическом редакторе, например Paint.Net (скриншот). Последнее же значение a устанавливает прозрачность и совпадает со значением свойства opacity.
http://cp77.comxa.com/verstka/css-transparent-fon
