Свойство CSS opacity
Свойство CSS opacity задаёт уровень прозрачности элемента. Попробуйте примеры и посмотрите результаты.
Свойство CSS opacity задаёт степень прозрачности элемента. Оно воздействует на весь элемент целиком — текст, фон, границы и все дочерние элементы исчезают вместе. Это одно из свойств CSS3.
Используйте opacity, когда нужно сделать элемент (и всё его содержимое) приглушённым: затемнить неактивную кнопку, создать эффект при наведении или наложить водяной знак на контент.
Как работает значение opacity
Значение — это число от 0 до 1:
0— элемент полностью прозрачен (невидим, но по-прежнему занимает место и остаётся интерактивным).1— значение по умолчанию, элемент полностью непрозрачен.- Любое промежуточное значение, например
0.5, делает элемент частично прозрачным. Меньшие числа означают большую прозрачность.
В современных браузерах значение можно также указывать в процентах: 50% эквивалентно 0.5.
Отрицательные значения недопустимы и ограничиваются — браузер воспринимает всё, что ниже 0, как 0, а всё, что выше 1, как 1.
Opacity также влияет на дочерние элементы. Когда родительский элемент становится прозрачным, все дочерние элементы тоже становятся прозрачными, и вы не можете сделать дочерний элемент полностью непрозрачным, задав ему opacity: 1. Если нужен полупрозрачный фон при сохранении текста и дочерних элементов непрозрачными, используйте цвет RGBA для background-color — например background-color: rgba(142, 191, 66, 0.3).
Элемент со значением opacity меньше 1 создаёт новый контекст наложения. Это может изменить способ перекрытия соседних элементов, поэтому затемнённый элемент может располагаться выше или ниже соседних элементов иначе, чем ожидается.
| Начальное значение | 1.0 |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируемое | Да. |
| Версия | CSS3 |
| DOM синтаксис | object.style.opacity = "0.3"; |
Синтаксис
Синтаксис CSS opacity
opacity: number | initial | inherit;Пример свойства opacity:
Пример кода CSS opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
background-color: #8ebf42;
opacity: 0.3;
}
.example2 {
background-color: #8ebf42;
opacity: 1;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity level is 0.3;</h3>
<div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
<h3>Opacity level is 1;</h3>
<div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>
</html>Результат
В примере ниже уровень прозрачности первого изображения равен 1.0, второго — 0.6, третьего — 0.2.
Пример свойства opacity с тремя уровнями прозрачности:
Ещё один пример кода CSS opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.a {
opacity: 1;
}
img.b {
opacity: 0.6;
}
img.c {
opacity: 0.2;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity: 1.0;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a" />
<h3>Opacity: 0.6;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b" />
<h3>Opacity: 0.2;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c" />
</body>
</html>opacity vs. фон RGBA
Распространённая ошибка — использовать opacity, когда нужен только полупрозрачный фон. Поскольку opacity делает прозрачными и дочерние элементы, текст внутри блока тоже становится бледным и труднее читается. Цвет фона RGBA применяет прозрачность только к цвету фона, оставляя текст полностью непрозрачным:
/* Fades the whole box, including the text */
.with-opacity {
background-color: #8ebf42;
opacity: 0.3;
}
/* Only the background is transparent; text stays crisp */
.with-rgba {
background-color: rgba(142, 191, 66, 0.3);
}Для управления цветом самого блока смотрите background-color.
Плавное исчезновение при наведении
Поскольку opacity поддерживает анимацию, оно хорошо сочетается со свойством transition для создания плавных эффектов затухания, например затемнения изображения до тех пор, пока пользователь не наведёт на него курсор:
.thumb {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.thumb:hover {
opacity: 1;
}opacity vs. visibility и display
opacity: 0, visibility: hidden и display: none — все скрывают элемент, но ведут себя по-разному:
| Объявление | Видим | Занимает место | Кликабельный |
|---|---|---|---|
opacity: 0 | Нет | Да | Да |
visibility: hidden | Нет | Да | Нет |
display: none | Нет | Нет | Нет |
Элемент с opacity: 0 невидим, но по-прежнему реагирует на клики, поэтому добавьте pointer-events: none, если нужно сделать его также неинтерактивным.
Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| number | Определяет уровень прозрачности. Значение по умолчанию — 1.0. | Попробуйте » |
| initial | Устанавливает для свойства значение по умолчанию. | Попробуйте » |
| inherit | Наследует свойство от родительского элемента. |