CSS прозрачность: практические способы задать фон и прозрачные блоки
Прозрачность в CSS часто ломает макет: наследование opacity и rgba приводят к неожиданным эффектам на вложенных элементах. Разбираем разницу между opacity и rgba, способы задавать прозрачный фон без побочных эффектов, совместимость и паттерны для блоков и секций.
Вы получите алгоритм правильного выбора метода для фоновой прозрачности и проверки браузерной совместимости. В результате сможете вставить рабочий CSS‑фрагмент, который сохранит читаемость и структуру макета.
Что можно сделать при помощи данной технологии?
Используя прозрачность 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 все достаточно просто и логично.
Надеемся, что данная статья оказалась для Вас действительно полезной.
Удачи!
Комментарии