Gennemsigtighed i CSS er en egenskab, der specificerer at kontrollere gennemsigtigheden af elementer som f.eks indhold eller billeder . Ved at bruge denne egenskab kan vi indstille alle billeder til at være fuldstændig uigennemsigtige ( synlig ), helt gennemsigtig ( skjult ), eller gennemskinnelig (delvis synlig). Det tager en numerisk værdi ligger mellem 0 og 1. Hvor 0 definerer fuldt transparent og 1 definerer fuldstændigt synligt. Opacitetsværdier mellem 0 og 1, såsom 0,2, 0,4, 0,6 osv., ændrer et billede fra gennemsigtigt til uigennemsigtigt ved gradvist at øge decimalværdien.
nummer alfabetet
Syntaks
opacity :
Den numeriske værdi skal være mellem 0 og 1 for at gøre billedet semi-transparent. Hvis vi giver 1, vil billedet være uigennemsigtigt, hvis den numeriske værdi er 0, bliver billedet helt gennemsigtigt.
Eksempel 1 : I dette eksempel vil vi bruge egenskaben opacitet til at gøre elementet gennemsigtigt, når du bevæger musen hen 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. Produktion
Hold musen over det røde felt for at vise en gennemsigtig eller uigennemsigtig effekt.
Overgangsopacitet i CSS
I CSS, en overgangsopacitet er en egenskab, der bruges til jævnt at ændre opacitetstilstanden fra et niveau til en anden tilstand. Det betyder, at overgangsopaciteten ændrer tilstanden af det uigennemsigtige element til transparent med en defineret varighed. Overgangen har fire egenskaber: overgangsegenskab, overgangsvarighed, overgangstidsfunktion og overgangsforsinkelse, der bruges til at udføre opacitetseffekten på et billede. Det overgang-varighed er en vigtig egenskab for gradvise ændringer eller pludselige ændringer, der afspejler opacitetseffekten på et element over en defineret varighed i millisekunder eller sekunder.
Stenografi egenskaben for overgang er som følger:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntaks til at definere overgangsopaciteten 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 } Overgangsejendom
Følgende er de overgangsegenskaber, der bruges til at kontrollere overgangseffekterne.
| Værdi | Beskrivelse |
|---|---|
| Overgangs- ejendom | Det bruges til at definere navnet på CSS-egenskaben, der viser overgangseffekten til billeder. |
| Overgangs- varighed | Det bruges til at definere tidsperioden i sekunder eller millisekunder for at vise overgangseffekten. |
| Overgangs-timing-funktion | Det bruges til at definere hastighedskurven på et billede for at vise overgangseffekten. |
| Overgangs- forsinkelse | Angiver, om overgangseffekten initieres på elementet eller billedet. |
Bemærk: Mens vi indstiller overgangsegenskaben til billedet eller indholdet, skal vi definere egenskaben for overgangsvarighed; ellers bliver varigheden 0, og det vil ikke vise nogen effekt.
Behovet for overgangsopacitet i CSS
Det Gennemsigtighed er en simpel CSS-egenskab, der bruges til at kontrollere et billedes gennemsigtighed ved at indstille opacitetsområdet fra 0 til 1. Det afspejler den statiske eller pludselige ændring på et element for at vise opacitetseffekten. For eksempel, hvis vi vil vise et billede som gennemsigtigt, skal vi indstille opacitetsværdien fra 0 til 1. Derefter viser det opacitetseffekten med det samme i stedet for at tage noget tid. Derfor bruger vi en overgangsopacitet i CSS, der styrer et elements gennemsigtighed over en defineret tidsperiode. Ved at bruge overgangstidsfunktionen i overgangsopacitet kan vi bestemme hastighedskurven for et element, der specificerer den hurtige opacitetseffekt på et billede. På denne måde bruger vi overgangsopacitetseffekten til at afspejle ændringer i den angivne tidsperiode i stedet for at ske med det samme.
Eksempel 2: I dette eksempel skal vi bruge overgangsopacitetsegenskaben, der afspejler opacitetseffekten i en specificeret 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> Produktion
