CSS Opacity / Transparency
Свойство opacity указывает непрозрачность/прозрачность элемента.
Прозрачное изображение
Свойство opacity может принимать значение от 0,0-1,0. Чем меньше значение, тем прозрачнее:
opacity 0.2
opacity 0.5
opacity 1
(default)
Примечание: IE8 и более раньше польза filter:alpha(opacity=x) . X может принимать значение от 0-100. Более низкое значение делает элемент более прозрачным.
Пример
img {
opacity: 0.5;
filter:
alpha(opacity=50); /* For IE8 and earlier */
}
Прозрачный эффект наведения
Свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении указателя мыши:
Пример
img {
opacity: 0.5;
filter:
alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8
and earlier */
}
Пример объяснено
Первый блок CSS аналогичен коду, приведенному в примере 1. Кроме того, мы добавили, что должно произойти, когда пользователь нависает над одним из изображений. В этом случае мы хотим, чтобы изображение не было прозрачным, когда пользователь наводит курсор на него. CSS для этого opacity:1; .
Когда указатель мыши отходит от изображения, изображение снова будет прозрачным.
Пример обратного эффекта наведения:
Пример
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8
and earlier */
}
Прозрачная коробка
При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы наследуют одинаковую прозрачность. Это может сделать текст внутри полностью прозрачный элемент трудно читать:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Пример
div {
opacity: 0.3;
filter:
alpha(opacity=30); /* For IE8 and earlier */
}
Прозрачность с помощью RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA. В следующем примере устанавливается непрозрачность для цвета фона, а не для текста:
100% opacity
60% opacity
30% opacity
10% opacity
Вы узнали из нашей главы CSS Colors, что вы можете использовать RGB в качестве значения цвета. В дополнение к RGB можно использовать значение цвета RGB с альфа-каналом (RGBA), который задает непрозрачность для цвета.
Значение цвета RGBA задается с помощью: RGBA (красный, зеленый, синий, альфа). Параметр Alpha является числом между 0,0 (полностью прозрачным) и 1,0 (полностью непрозрачным).
Совет: Вы узнаете больше о RGBA цветах в нашей главе CSS Colors.
Пример
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}
Текст в прозрачном окне
Это некоторый текст, который помещается в прозрачный прямоугольник.
Пример
<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); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Сначала мы создаем элемент <div> (класс = "фон") с фоновым изображением и рамкой. Затем создадим еще один <div> (класс = "трансбокс") внутри первого <div>. Класс < div = "трансбокс" > имеет цвет фона, а граница-div является прозрачным. Внутри прозрачного <div>, мы добавляем некоторый текст внутри элемента <p>.