CSS Прозрачность
Свойство opacity определяет непрозрачность/прозрачность элемента.
CSS opacity
Свойство opacity может принимать значение от 0.0 - 1.0. Чем меньше значение, тем прозрачнее:
opacity 0.2
opacity 0.5
opacity 1
(по умолчаню)
Примечание: IE8 и более раннее использование filter:alpha(opacity=x).
x может принимать значение от 0 до 100.
Чем значение меньше, тем элемент более прозрачный.
Пример
img {
opacity: 0.5;
filter:
alpha(opacity=50); /* Для IE8 и более ранних версий */
}
Попробуйте сами »
Прозрачный эффект при наведении
Свойство 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
Пример
div {
opacity: 0.3;
filter:
alpha(opacity=30); /* Для IE8 и более ранних версий */
}
Попробуйте сами »
Прозрачность с помощью RGBA
Если Вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значение цвета RGBA. В следующем примере устанавливается непрозрачность для цвета фона, а не текста:
100% opacity
60% opacity
30% opacity
10% opacity
Вы уже узнали от нашего раздела CSS Цвета, что можно использовать RGB в качестве значения цвета. Вкачестве дополнения к RGB, можно использовать значение цвета RGB с альфа-каналом (RGBA) - который задает прозрачность цвета.
Значение цвета RGBA указывается с помощью: rgba(red, green, blue, alpha).
Параметр alpha является числом между 0.0
(полностью прозрачный) и 1.0 (полностью непрозрачный).
Совет: Вы выучите больше о цветах RGB в нашем разделе CSS3 Цвета.
Пример
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>.
Имея цвет фона и границы класс class="transbox" - является прозрачным.
Внутри прозрачного <div>, мы добавляем текст внутри элемента <p>.