CSS прозрачность – просто о важном

О том, что такое CSS, знают практически все, кто тем или иным образом причастен к созданию сайтов. Термин «CSS прозрачность» (или css opacity) тоже на слуху. Чаще всего эта методика используется для решения дизайнерских задач (посредством верстки), улучшения юзабилити ресурса.

Что можно сделать при помощи данной технологии?

Используя прозрачность CSS, можно варьировать степень прозрачности как страницы в целом, так и отдельных ее частей:

Как задается прозрачность CSS: формальности

За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает «прозрачность»).

Данное свойство характеризуется следующими признаками:

• значение задается в цифровом выражении (от 0 до 10; чем больше число – тем меньшей будет прозрачность объекта);
• применяется ко всем элементам, имеющимся на странице (то есть можно задать при помощи CSS прозрачность блока или текста);
• не наследуется.

Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:

Техническая сторона вопроса: задаем прозрачность фона

Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.

Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ 
 -moz-opacity: 0.5; /- Mozi11a 1.6 m amme */ 
 -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
 opacity: 0.5; /* C553 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */

При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.

Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).

Исходный код:

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

Видоизменяем код на такой:

.prozrachnost {
 opacity:0.5;
 filter:alpha(opacity=50);
 -moz-opacity:O.S;
 background-color:#000000; 
width:340px; 
height:1500px; 
position: absolute; 
top:0px; 
left:0px; 
z-index:-1; 
}

Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.

Техническая сторона вопроса: задаем прозрачность блока

Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.

Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:

HTML код:

<div id="text">A я нет!</div> 
 <div id="box">Я прозрачный!</div>

CSS стили:

body {
 margin: 0; 
padding: 0; 
background: #66CCFF; 
font-size: 20px; 
}
#box { 
margin: 20px; 
background: #FFFFFF; 
padding: 20px; 
width: 300px; 
height: 70px; 
z-index: 0; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
opacity: 0.5; 
}

#text { 
background: #FFFFFF; 
width: 150px; 
height: 30px; 
padding: l0px; 
z-index: 10; 
position: absolute; 
left: 70px; 
top: 70px;
}

Сущность данного метода состоит в том, что блок, который надо сделать непрозрачным, не является на самом деле дочерним. Поэтому его прозрачность будет независимой величиной.

Дополнение

Еще один важный вопрос прозрачность background в CSS. Иными словами, это создание полупрозрачного цветного фона. Его можно задать следующим образом:

background: rgba( 255, 0, 0, 0.5); /* чистый красный с прозрачностью 50% */

Таким образом, в работе с прозрачностью в CSS все достаточно просто и логично.

Надеемся, что данная статья оказалась для Вас действительно полезной.

Удачи!