Непрозирност у ЦСС-у је својство које специфицира контролу транспарентности елемената као што су садржаја или слике . Користећи ово својство, можемо поставити било коју слику да буде потпуно непрозирна ( видљиво ), потпуно транспарентан ( сакривен ), или провидан (делимично видљив). Потребно је да нумеричка вредност лежи између 0 и 1. Где 0 дефинише потпуно транспарентан, а 1 дефинише потпуно видљив. Вредности непрозирности између 0 и 1, као што су 0,2, 0,4, 0,6, итд., мењају слику из транспарентне у непрозирну постепеним повећањем децималне вредности.
Синтакса
opacity :
Нумеричка вредност мора бити између 0 и 1 да би слика била полутранспарентна. Ако дамо 1, слика ће бити непрозирна, ако је нумеричка вредност 0, слика постаје потпуно транспарентна.
Пример 1 : У овом примеру користићемо својство непрозирности да учинимо елемент транспарентним када померите миш преко елемента.
Маин.хтмл
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. Излаз
Пређите мишем преко црвеног оквира да бисте приказали ефекат провидности или непрозирности.
Прозирност транзиције у ЦСС-у
У ЦСС-у, а непрозирност прелаза је својство које се користи за глатку промену стања непрозирности из једног нивоа у друго стање. То значи да непрозирност прелаза мења стање непрозирног елемента у транспарентан са дефинисаним временским трајањем. Прелаз има четири својства: својство транзиције, трајање транзиције, функција времена транзиције и кашњење транзиције, које се користе за извођење ефекта непрозирности на слици. Тхе прелаз-трајање је важно својство за постепене промене или изненадне промене које одражавају ефекат непрозирности на елемент током дефинисаног временског трајања у милисекундама или секундама.
Краткорочно својство транзиције је следеће:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Синтакса за дефинисање непрозирности прелаза у ЦСС-у
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Транзиционо својство
Следе својства прелаза која се користе за контролу ефеката прелаза.
| Валуе | Опис |
|---|---|
| Транзиција- својство | Користи се за дефинисање имена ЦСС својства које показује ефекат прелаза на слике. |
| Транзиција- трајање | Користи се за дефинисање временског периода у секундама или милисекундама за приказ ефекта прелаза. |
| Функција временског преласка | Користи се за дефинисање криве брзине на слици да би се приказао ефекат прелаза. |
| Транзиција- кашњење | Одређује да ли се ефекат прелаза покреће на елементу или слици. |
Напомена: Док постављамо својство транзиције на слику или садржај, морамо дефинисати својство трајања транзиције; у супротном, трајање постаје 0 и неће показати никакав ефекат.
Потреба за непрозирношћу прелаза у ЦСС-у
Тхе непрозирност је једноставно ЦСС својство које се користи за контролу транспарентности слике постављањем опсега непрозирности од 0 до 1. Одражава статичку или изненадну промену на елементу да би се приказао ефекат непрозирности. На пример, ако желимо да прикажемо слику као прозирну, морамо да подесимо вредност непрозирности од 0 до 1. Након тога, она одмах показује ефекат непрозирности уместо да траје неко време. Због тога користимо а непрозирност прелаза у ЦСС-у који контролише транспарентност елемента током дефинисаног временског периода. Користећи функцију прелаз-време у непрозирности прелаза, можемо одредити криву брзине елемента који специфицира ефекат брзе непрозирности на слици. На овај начин користимо ефекат непрозирности прелаза да одразимо промене у наведеном временском периоду уместо да се дешавају одмах.
Пример 2: У овом примеру користићемо својство непрозирности прелаза које одражава ефекат непрозирности у одређеном временском трајању уместо одмах.
Филе1.хтмл
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> Излаз
