CSS function opacity()
Опис
Функція opacity() в CSS використовується для зміни прозорості елемента. Вона дозволяє контролювати ступінь прозорості від повного непрозорого значення до повної прозорості. Використовуючи opacity(), ви можете створювати ефекти прозорості, накладати елементи один на одного та контролювати їх видимість.
Функція opacity() приймає один аргумент, який вказує ступінь прозорості. Це значення повинно бути від 0 до 1, де 0 означає повну прозорість (елемент стає невидимим), а 1 - повну непрозорість (елемент повністю видимий). Наприклад, opacity(0.5) зробить елемент напівпрозорим, дозволяючи пройти через нього півтону кольору або відображати задній фон частково.
Використання функції opacity() корисне, коли вам потрібно створити ефекти перекриття, наведення мишею, анімацій або надання елементам плавного зникнення або появи. Ви можете застосовувати opacity() до будь-якого елемента, який підтримує властивість прозорості, такої як текст, зображення, фон або блок елементів.
Важливо пам'ятати, що opacity() впливає не тільки на відображення самого елемента, але і на його дочірні елементи. Якщо ви застосуєте opacity() до батьківського елемента, його дочірні елементи також будуть мати відповідну прозорість.
| Порада: | Зверніть увагу, що |
| Нотатка: | Застосування значень менше |
Синтаксис
opacity(<value>)<value>Числове значення в межах від
0до1, що вказує ступінь прозорості елемента. Значення0встановлює повну прозорість, а значення1- повну непрозорість.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
18 |
35 |
6 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
53 |
35 |
6 |
Мобільних переглядачів ще не додано.
Приклади
Наведіть курсор на квадрат, щоб побачити ефект функції opacity().
Перше зображенная - оригінальне, друге - з функцією opacity().