CSS свойство opacity
The CSS Opacity Property sets the level of transparency of an element. Try CSS Opacity Property example yourself and see the results.
Свойство opacity используется для установки уровня прозрачности элемента.
Это свойство входит в число свойств CSS3.
Это свойство позволяет сделать элемент полностью прозрачным, полупрозрачным или использовать значение по умолчанию.
Число находится в диапазоне от 0 до 1. 0 делает элемент полностью прозрачным. 1 — значение по умолчанию, которое делает элемент полностью непрозрачным. Значение между 0 и 1 постепенно делает его прозрачным.
info
Отрицательные значения недопустимы.
success
При добавлении прозрачности фону элемента с помощью свойства 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="/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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| number | Определяет уровень прозрачности. Значение по умолчанию — 1.0. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что такое свойство 'opacity' в CSS и как оно используется?