Motnost v CSS je lastnost, ki določa nadzor preglednosti elementov, kot je npr vsebino oz slike . Z uporabo te lastnosti lahko katero koli sliko nastavimo tako, da je popolnoma neprozorna ( viden ), popolnoma prozoren ( skrit ) ali prosojen (delno viden). Številčna vrednost je med 0 in 1. Pri čemer 0 opredeljuje popolnoma pregledno, 1 pa popolnoma vidno. Vrednosti motnosti med 0 in 1, kot so 0,2, 0,4, 0,6 itd., spremenijo sliko iz prosojne v neprozorno s postopnim povečevanjem decimalne vrednosti.

Sintaksa

 opacity : 

Številska vrednost mora biti med 0 in 1, da bo slika polprosojna. Če podamo 1, bo slika neprozorna, če je številska vrednost 0, postane slika popolnoma prosojna.

Primer 1 : V tem primeru bomo uporabili lastnost neprozornosti, da bo element prosojen, ko premaknete miško nad element.

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. 

Izhod

Z miško se pomaknite nad rdeče polje, da prikažete učinek prosojnosti ali motnosti.

Motnost prehoda v CSS

V CSS, a motnost prehoda je lastnost, ki se uporablja za gladko spreminjanje stanja motnosti iz ene ravni v drugo stanje. To pomeni, da motnost prehoda spremeni stanje neprozornega elementa v prozorno z določenim časovnim trajanjem. Prehod ima štiri lastnosti: lastnost prehoda, trajanje prehoda, funkcijo časovnega prehoda prehoda in zamudo prehoda, ki se uporabljajo za izvajanje učinka motnosti na sliki. The prehod-trajanje je pomembna lastnost za postopne ali nenadne spremembe, ki odražajo učinek motnosti na element v določenem časovnem obdobju v milisekundah ali sekundah.

Skrajšana lastnost prehoda je naslednja:

 transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay]; 

Sintaksa za definiranje motnosti prehoda v 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 } 

Prehodna lastnina

Sledijo lastnosti prehoda, ki se uporabljajo za nadzor učinkov prehoda.

Opomba: Med nastavljanjem lastnosti prehoda na sliko ali vsebino moramo definirati lastnost trajanja prehoda; v nasprotnem primeru trajanje postane 0 in ne bo pokazalo nobenega učinka.

Potreba po motnosti prehoda v CSS

The nepreglednost je preprosta lastnost CSS, ki se uporablja za nadzor prosojnosti slike z nastavitvijo obsega motnosti od 0 do 1. Odraža statično ali nenadno spremembo elementa, da prikaže učinek motnosti. Na primer, če želimo sliko prikazati kot prosojno, moramo nastaviti vrednost motnosti od 0 do 1. Po tem takoj pokaže učinek motnosti, namesto da bi trajalo nekaj časa. Zato uporabljamo a motnost prehoda v CSS, ki nadzira preglednost elementa v določenem časovnem obdobju. Z uporabo funkcije prehodnega časa v motnosti prehoda lahko določimo krivuljo hitrosti elementa, ki določa učinek hitre motnosti na sliki. Na ta način uporabimo učinek motnosti prehoda, da odraža spremembe v določenem časovnem obdobju, namesto da bi se zgodile takoj.

Primer 2: V tem primeru bomo uporabili lastnost motnosti prehoda, ki odraža učinek motnosti v določenem časovnem obdobju namesto takoj.

Datoteka1.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> 

Izhod