Hvordan bruke CSS -overgang for opacitet Fade bakgrunn

CSS gir mange gunstige egenskaper til HTML -elementer. Disse egenskapene hjelper brukere med å justere HTML -elementene, for eksempel størrelse, farge, opacitet, overgang og mange flere. Mer spesifikt, “overgang”Eiendom tillater utviklerne å sette gjennomsiktighetsnivået og legge til effekter på HTML -elementene. Denne spesielle funksjonen kan gjøre websiden mer underholdende og engasjerende.

Dette innlegget vil instruere deg om å bruke CSS -overgangen for Opacity Fade -bakgrunner.

Hvordan bruke CSS -overgang for opacitet Fade bakgrunn?

CSS “overgang”Eiendom brukes til å endre eiendomsverdiene innen en spesifikk varighet gradvis. Mens CSS “Opacitet”Eiendom justerer gjennomsiktighetsnivået på elementer.

Følg de medfølgende trinnene for å bruke CSS -overgang for opacitet.

Trinn 1: Lag et kort i HTML

Først av alt:

• Legg til en "”Element og tilordne det en klasse”kort”.
• Inkluder da “

  ”Tag for å sette en overskrift og“

  ”Element for å spesifisere tekstinnhold.

• Etter det, legg til en “”Tag for bildet. “src”Attributt spesifiserer bildens URL, og“klasse”Attributt er satt som“Fade-img”For å få tilgang til bildet i CSS for styling.

Html

MR. John

Teknisk forfatter

Trinn 2: Style kortet

“.kort”Klasse er stylet med de nedenfor-listede egenskapene:

.kort
Bredde: 300px;
Høyde: 300px;
Grense: 1px fast RGB (232, 229, 232);
Margin: Auto;
polstring: 15px;
Border-Radius: 10px;
Posisjon: relativ;

Her:

• “bredde”Bestemmer elementets bredde.
• “høyde”Bestemmer elementets høyde.
• “grense”Legger til en grense rundt elementet.
• “margin”Genererer plass rundt elementet.
• “polstring”Produserer plass inne i elementets grense.
• “Border-Radius”Runder elementets kanter.
• “posisjon”Eiendom er satt til“slektning”, Som brukes til å sette elementet i forhold til den opprinnelige posisjonen.

Produksjon

Trinn 3: Juster bildet

“.Fade-img”Klasse brukes i CSS for å style bildet. Bildestørrelsen og opaciteten vil bli justert i denne klassen:

.fade-img
Posisjon: Absolutt;
Venstre: 0;
Topp: 0;
Høyde: 100%;
Bredde: 100%;
objekt-fit: deksel;
Opacitet: 0.2;
Overgang: Opacitet .25-talls letthet;
Markør: peker;

Følgende beskrevne egenskaper legges til "Fade-img”Klasse:

• “posisjon”Med verdien”Absolutt”Angir elementets posisjon som tilsvarer det nesten plasserte elementet.
• “topp”Og“venstre”Er forskyvningsegenskapene som justerer elementet fra toppen, venstre, høyre og bunn.
• “bredde”Og“høyde”Egenskaper brukes til å spesifisere elementets område.
• “Objekt-fit”Eiendom med verdien”dekke”Får bildet til å fylle beholderen.
• “Opacitet”Verdien betegner transparensnivået.
• “overgang”Eiendom med verdien”Opacitet .25-talls lette”Definerer opacitetsegenskapen som gradvis beveger seg inn i løpet av"25s”.
• “markør”Eiendom definerer markørstilen.

Trinn 4: Legg til opacitet på svevet

“.Fade-Img: Hopp”Brukes til å påføre styling på bildet når pekendeheten svever på den. Dessuten, “:sveve”Er en CSS pseudoklasse som brukes til å legge til stiler på svevet:

.Fade-img: Hopp
Opacitet: 0.9;

Her justeres opacitetsnivået til “0.9”.

Produksjon

Det kan observeres at vi har brukt CSS -overgangsegenskapen for å falme bakgrunnen.

Konklusjon

For å legge til en overgang for opacitetsfadebakgrunn, sett først "" område. Juster deretter størrelsen og opaciteten ved å bruke CSS “bredde”,“høyde”, Og“Opacitet" egenskaper. Deretter må du oppgi "overgangEiendom til det, som vil avgjøre hvordan eiendomsverdiene endres gradvis over en spesifikk varighet. Og så "Opacitet”Er igjen satt på musens svev ved å bruke“:sveve”Pseudoklasse. Dette innlegget har forklart prosedyren for hvordan du bruker overgangsegenskaper for opacity fade -bakgrunn i CSS.