Opasitet i CSS er en egenskap som spesifiserer å kontrollere gjennomsiktigheten av elementer som f.eks innhold eller Bilder . Ved å bruke denne egenskapen kan vi sette alle bilder til å være helt ugjennomsiktige ( synlig ), helt gjennomsiktig ( skjult ), eller gjennomskinnelig (delvis synlig). Det tar en numerisk verdi ligger mellom 0 og 1. Der 0 definerer fullstendig gjennomsiktig og 1 definerer fullstendig synlig. Opasitetsverdier mellom 0 og 1, for eksempel 0,2, 0,4, 0,6 osv., endrer et bilde fra gjennomsiktig til ugjennomsiktig ved gradvis å øke desimalverdien.

k nærmeste nabo

Syntaks

 opacity : 

Den numeriske verdien må være mellom 0 og 1 for å gjøre bildet halvgjennomsiktig. Hvis vi gir 1, vil bildet være ugjennomsiktig, hvis den numeriske verdien er 0, blir bildet helt gjennomsiktig.

Eksempel 1 : I dette eksemplet vil vi bruke egenskapen opacity for å gjøre elementet gjennomsiktig når du beveger musen over elementet.

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. 

Produksjon

Hold musen over den røde boksen for å vise en gjennomsiktig eller ugjennomsiktig effekt.

Transition Opacity i CSS

I CSS, en overgangsopasitet er en egenskap som brukes til å jevnt endre opasitetstilstanden fra ett nivå til en annen tilstand. Det betyr at overgangsopasiteten endrer tilstanden til det ugjennomsiktige elementet til transparent med en definert varighet. Overgangen har fire egenskaper: overgangsegenskap , overgangsvarighet, overgangstidsfunksjon og overgangsforsinkelse , som brukes til å utføre opasitetseffekten på et bilde. De overgang-varighet er en viktig egenskap for gradvise endringer eller plutselige endringer som gjenspeiler opasitetseffekten på et element over en definert varighet i millisekunder eller sekunder.

Stenografi-egenskapen for overgang er som følger:

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

Syntaks for å definere overgangsopasiteten i 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 } 

Overgangseiendom

Følgende er overgangsegenskapene som brukes til å kontrollere overgangseffektene.

Merk: Når vi angir overgangsegenskapen til bildet eller innholdet, må vi definere egenskapen for overgangsvarighet; ellers blir varigheten 0, og det vil ikke vise noen effekt.

Behovet for overgangsopasitet i CSS

De opasitet er en enkel CSS-egenskap som brukes til å kontrollere gjennomsiktigheten til et bilde ved å sette rekkevidden for opasitet fra 0 til 1. Den reflekterer den statiske eller plutselige endringen på et element for å vise opasitetseffekten. Hvis vi for eksempel ønsker å vise et bilde som gjennomsiktig, må vi sette opasitetsverdien fra 0 til 1. Etter det viser det opasitetseffekten umiddelbart i stedet for å ta litt tid. Derfor bruker vi en overgangsopasitet i CSS som kontrollerer et elements gjennomsiktighet over en definert tidsperiode. Ved å bruke overgangstidsfunksjonen i overgangsopasitet kan vi bestemme hastighetskurven til et element som spesifiserer den raske opasitetseffekten på et bilde. På denne måten bruker vi overgangsopasitetseffekten til å reflektere endringer i den angitte tidsperioden i stedet for å skje umiddelbart.

Eksempel 2: I dette eksemplet skal vi bruke transition opacity-egenskapen som gjenspeiler opasitetseffekten i en spesifisert tidsperiode i stedet for umiddelbart.

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

Produksjon