Site icon Vavik96

Прозрачность с помощью CSS

admin
Справочник свойств CSS

Справочник свойств 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

Exit mobile version