Непрозорість у CSS — це властивість, яка вказує на керування прозорістю таких елементів, як вміст або зображення . Використовуючи цю властивість, ми можемо зробити будь-які зображення повністю непрозорими ( видно ), повністю прозорий ( прихований ), або напівпрозорий (частково видимий). Він приймає числове значення між 0 і 1. Де 0 означає повністю прозорий, а 1 – повністю видимий. Значення непрозорості від 0 до 1, наприклад 0,2, 0,4, 0,6 тощо, змінюють зображення з прозорого на непрозоре шляхом поступового збільшення десяткового значення.
Синтаксис
opacity :
Числове значення має бути від 0 до 1, щоб зробити зображення напівпрозорим. Якщо вказати 1, зображення буде непрозорим, якщо числове значення дорівнює 0, зображення стане повністю прозорим.
Приклад 1 : у цьому прикладі ми будемо використовувати властивість opacity, щоб зробити елемент прозорим під час наведення миші на елемент.
Main.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Вихід
шлока мехта
Наведіть курсор миші на червоне поле, щоб відобразити ефект прозорості або непрозорості.
Непрозорість переходу в CSS
У CSS, a непрозорість переходу це властивість, яка використовується для плавної зміни стану непрозорості з одного рівня на інший. Це означає, що непрозорість переходу змінює стан непрозорого елемента на прозорий із визначеною тривалістю часу. Перехід має чотири властивості: властивості переходу, тривалість переходу, функція синхронізації переходу та затримка переходу, які використовуються для виконання ефекту непрозорості на зображенні. The перехід-тривалість є важливою властивістю для поступових або раптових змін, які відображають вплив непрозорості на елемент протягом визначеного періоду часу в мілісекундах або секундах.
Скорочена властивість переходу полягає в наступному:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Синтаксис для визначення непрозорості переходу в CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Перехідна властивість
Нижче наведено властивості переходу, які використовуються для керування ефектами переходу.
| Значення | опис |
|---|---|
| Перехідна властивість | Він використовується для визначення назви властивості CSS, яка показує ефект переходу до зображень. |
| Перехід - тривалість | Він використовується для визначення періоду часу в секундах або мілісекундах для відображення ефекту переходу. |
| Функція часу переходу | Він використовується для визначення кривої швидкості на зображенні, щоб показати ефект переходу. |
| Перехід - затримка | Визначає, чи ініціюється ефект переходу на елементі чи зображенні. |
Примітка: встановлюючи властивість переходу для зображення або вмісту, ми повинні визначити властивість тривалість переходу; інакше тривалість стає нульовою, і це не матиме жодного ефекту.
Необхідність непрозорості переходів у CSS
The непрозорість це проста властивість CSS, яка використовується для керування прозорістю зображення шляхом встановлення діапазону непрозорості від 0 до 1. Вона відображає статичну або раптову зміну елемента, щоб показати ефект непрозорості. Наприклад, якщо ми хочемо відобразити зображення як прозоре, ми маємо встановити значення непрозорості від 0 до 1. Після цього ефект непрозорості відображається негайно, а не займає деякий час. Тому ми використовуємо a непрозорість переходу у CSS, який контролює прозорість елемента протягом певного періоду часу. Використовуючи функцію переходу-часу в непрозорості переходу, ми можемо визначити криву швидкості елемента, який визначає ефект швидкої непрозорості зображення. Таким чином ми використовуємо ефект непрозорості переходу, щоб відобразити зміни за вказаний період часу, а не негайно.
приклад 2: У цьому прикладі ми збираємося використовувати властивість непрозорості переходу, яка відображає ефект непрозорості протягом певного періоду часу, а не відразу.
Файл1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Вихід
