CSS - CSS3 Opacity Gradient

Produksjon

Trinn 3: Style Div Container

Få tilgang til DIV -containeren ved å bruke klassenavnet med klassevelgeren som “#hovedinnhold”:

#hovedinnhold
Bakgrunnsfarge: Lysgrønn;
Margin: 20px 80px;
Grense: 3px prikket blå;

Bruk deretter de nedenfor oppførte CSS -egenskapene:

• “bakgrunnsfarge”Brukes for å sette fargen på baksiden av elementet.
• “margin”Tildeler rom på utsiden av den definerte grensen.
• “grense”Eiendom brukes til å bestemme en grense rundt det definerte elementet.

Trinn 4: Stil avsnitt

Stil nå avsnittet ved å få tilgang til det med klassenavnet ".Paragraf-1”:

.avsnitt-1
Farge: blå;
overløp: skjult;
Posisjon: relativ;
Mix-Blend-Mode: Hard-Light;
Font-størrelse: 30px;

Her:

• “farge”Eiendom tildeler en farge til teksten i avsnittet.
• “flyte”Brukes for å vise resultatene når innhold søler fra et elements boks. Denne egenskapen bestemmer om du vil ta tekst eller legge til rullefelt når et slikt elements innhold er langvarig å sette i et bestemt område.
• “posisjon”Setter elementets plassering i et dokument.
• “Mix-blend-modus”CSS -egenskap brukes til å sette inn et elements innhold blandet med elementets rotinnhold og bakgrunn.
• “skriftstørrelse”Brukes til å definere en bestemt skrift for teksten i avsnittet.

Trinn 5: Sett “Linear-Gradient” på avsnitt

Bruk “.Paragraf-1”For å få tilgang til klassen“: etter ”:

.avsnitt 1: Etter
Posisjon: Absolutt;
Topp: 0px;
Bakgrunn: Lineær-gradient (gjennomsiktig, grå);
Venstre: 0px;
innhold: "";
Bredde: 100%;
Høyde: 100%;
Peker-hendelser: Ingen;

I følge den gitte kodebiten:

• “posisjon”Er satt som absolutt i dette utdraget.
• “venstre”Og“topp”Egenskaper brukes til å stille inn elementets plassering på venstre og toppsider.
• “bakgrunn”Eiendomssett som“ Linear-Gradient ”skaper en bakgrunn som består av en pågående overgang mellom forskjellige farger med en rett linje.
• “innhold”Eiendom brukes til å sette innholdet.
• “bredde”Tildeler elementets bredde.
• “høyde”Eiendom brukes til å sette høyden på det definerte elementet.
• “peker-event”Angir forholdene under hvilket et visst visuelt element ble hendelsesmålet

Produksjon

Det kan legges merke til at CSS -opacitetsgradienten har blitt brukt vellykket.

Konklusjon

For å angi opacitetsgradienten, først, legg til tekst i avsnittet ved å bruke "

" stikkord. Få tilgang til avsnittet og bruk "bakgrunn”CSS -eiendom, og setter verdien av denne egenskapen som“lineær gradient”. Det skaper en bakgrunn som består av en progressiv overgang mellom to eller flere farger langs en rett linje. Denne oppskrivningen har forklart CSS-opacitetsgradienten.