CSS Opacity / Transparency
Свойство opacity определяет непрозрачность / прозрачность элемента.
Прозрачное изображение
Свойство opacity может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:
opacity 0.2
opacity 0.5
opacity 1
(по умолчанию)
Примечание: IE8 и более ранние версии используют filter:alpha(opacity=x). Значение x может принимать значение от 0 до 100. Более низкое значение делает элемент более прозрачным.
Эффект прозрачности при наведении курсора
Свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении курсора:
Пример
img {
opacity: 0.5;
filter:
alpha(opacity=50); /* Для IE8 и ранее */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* Для IE8 и ранее */
}
Попробуйте сами »
Объяснение примера
Первый блок CSS похож на код в Примере 1. Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда пользователь наводит на него курсор. Значение в CSS для этого opacity:1;.
Когда указатель мыши отходит от изображения, изображение снова становится прозрачным.
Пример обратного эффекта при наведении курсора:
Пример
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* Для IE8 и ранее */
}
Попробуйте сами »
Прозрачный блок
При использовании свойства opacity для добавления прозрачности на фон элемента все его дочерние элементы наследуют одинаковую прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте цветовые значения RGBA. В следующем примере задается прозрачность цвета фона, а не текста:
100% opacity
60% opacity
30% opacity
10% opacity
Из главы Цвета CSS вы узнали, что в качестве значения цвета можно использовать RGB. В дополнение к RGB можно использовать значение цвета RGB с альфа-каналом (RGBA), которое определяет непрозрачность для цвета.
Значение цвета RGBA указывается с помощью: rgba (красный, зеленый, синий, альфа). Параметр alpha - это число от 0,0 (полностью прозрачное) до 1,0 (полностью непрозрачное).
Совет. Подробнее о цветах RGBA вы узнаете в разделе CSS Цвета на нашем сайте W3Schools на русском.
Пример
div {
background: rgba(76, 175, 80, 0.3) /* Зеленый фон с 30% прозрачности */
}
Попробуйте сами »
Текст в прозрачном поле
Это некоторый текст, который помещается в прозрачный блок.
Пример
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* Для IE8 и ранее */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Это некоторый текст, который помещается в прозрачный блок.</p>
</div>
</div>
</body>
</html>
Попробуйте сами »
Сначала мы создаем элемент <div> (class="background") с фоновым изображением и границей. Затем мы создаем еще один <div> (class="transbox") внутри первого <div>. <div class="transbox"> имеют цвет фона и границу - div прозрачен. Внутри прозрачного <div> мы добавляем текст внутри элемента <p>.
