Свойство opacity определяет непрозрачность/прозрачность элемента.
CSS opacity
CSS свойство 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 и более ранних версий */
}
Попробуйте сами »
Прозрачный эффект при наведении
CSS свойство 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 и более ранних версий */
}
Попробуйте сами »
Прозрачный бокс
При использовании CSS свойства 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> - является прозрачным. Внутри прозрачного <div>, мы добавляем некоторый текст внутри элемента <p>.