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.
| Verdi | Beskrivelse |
|---|---|
| Overgangs- eiendom | Den brukes til å definere navnet på CSS-egenskapen som viser overgangseffekten til bilder. |
| Overgang- varighet | Den brukes til å definere tidsperioden i sekunder eller millisekunder for å vise overgangseffekten. |
| Overgangs-timing-funksjon | Den brukes til å definere hastighetskurven på et bilde for å vise overgangseffekten. |
| Overgang- forsinkelse | Angir om overgangseffekten initieres på elementet eller bildet. |
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
