CSS свойство opacity
Свойство opacity используется для установки уровня прозрачности элемента.
Это свойство входит в число свойств CSS3.
Это свойство позволяет сделать элемент полностью прозрачным, полупрозрачным или использовать значение по умолчанию.
Число находится в диапазоне от 0 до 1. 0 делает элемент полностью прозрачным. 1 — значение по умолчанию, которое делает элемент полностью непрозрачным. Значение между 0 и 1 постепенно делает его прозрачным.
INFO
Отрицательные значения недопустимы.
TIP
При добавлении прозрачности фону элемента с помощью свойства opacity, все его дочерние элементы также становятся прозрачными. Используйте цвета RGBA, если не хотите применять opacity к дочерним элементам.
| Начальное значение | 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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a" />
<h3>Opacity: 0.6;</h3>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b" />
<h3>Opacity: 0.2;</h3>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c" />
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| number | Определяет уровень прозрачности. Значение по умолчанию — 1.0. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что такое свойство 'opacity' в CSS и как оно используется?