CSS skaper strukturert bakgrunn

I CSS kan brukerne bruke forskjellige egenskaper for å plassere elementets bakgrunn. Dessuten tillater CSS også brukerne å legge til et strukturert bilde som elementets bakgrunn. “bakgrunnsbilde”Eiendom brukes til å sette ett eller flere bilder som bakgrunnsbilder. Mens “Bakgrunnsrepetitt”CSS -egenskap gjør bakgrunnsbildet gjenta og strukturert.

I denne opplæringen vil vi illustrere metoden for å lage en strukturert bakgrunn.

Hvordan lage strukturert bakgrunn ved å bruke CSS?

Følg prosedyren for å lage en strukturert bakgrunn ved å bruke CSS.

Trinn 1: Lag en div container

I et HTML -dokument, lag en enkel “”Element med klassenavnet”T-Background”.

Trinn 2: Legg til seksjon

Deretter legger du til en "”Tag sammen med“stil”Attributt, og sett stilen som“Display: Flex”. Denne egenskapen brukes til å stille opp utformingen eller lengden på fleksible gjenstander eller elementer.

Trinn 3: Lag en annen div

Inne i "”Container, sett inn ytterligere to elementer sammen med“Tekstur-1”Og“Tekstur-2”Klasser, henholdsvis:

Trinn 4: Tilgangsklasseelementer

I CSS -delen får tilgang til begge deler "div”Containere som har klasser”Tekstur-1”Og“Tekstur-2”Bruke DOT -velgeren. Prøv deretter de nevnte CSS -stylingegenskapene:

.Tekstur-1, .tekstur-2
Margin: 50px;
Høyde: 200px;
Bredde: 200px;
Bakgrunnsfarge: #1ECE85;

Her:

• Vi har brukt “margin”Eiendom for å spesifisere plassen rundt elementet.
• Og så "høyde”Attributt brukes til å tildele høyden til elementet.
• “bredde”Eiendom er satt som“200px”For å definere elementbredden.
• “bakgrunnsfarge”CSS -egenskap tildeler fargen til elementets bakgrunn.

Det resulterende bildet beskriver utgangen fra koden ovenfor:

Trinn 5: Lag bakgrunn som strukturert

Bruk nå følgende CSS -egenskaper for å gjøre bakgrunnen strukturert:

.tekstur-1
Bakgrunnsbilde: Repeating-Linear-Gradient (36deg, RGBA (255, 253, 253, 0.1), RGBA (255.255.255, 0.1) 1px, gjennomsiktig 0px, gjennomsiktig 2px);

Først, bruk ".strukturert-1”Klasse for å få tilgang til det første elementet og bruke de forskjellige egenskapene:

• “bakgrunnsbilde”Eiendom brukes til å sette bildet på baksiden av elementet.
• “Gjenta-lineær-gradient”Er en funksjon som brukes til å angi bakgrunnsbildet. Denne CSS -funksjonen gjør at et bilde består av å gjenta lineære gradienter.
• Sett deretter vinkelen som "36deg”For å gjenta gradient-tiltede grader.
• Etter det, spesifiser fargen for den gjentagende lineære graden som “RGBA (255, 253, 253, 0.1)”Og“RGBA (255.255.255, 0.1) 1px”.
• Til slutt, legg til åpenhet i bakgrunnsbildet.

La oss bruke en teksturbakgrunn for andre "”:

.tekstur-2
Bakgrunnsbilde: URL (/blader.png);
Bakgrunnsrepetisjon: Gjenta;

Få tilgang til det andre “" ved hjelp av ".Tekstur-2”. Deretter bruker du “bakgrunnsbilde”Eiendom og angi bildet ved å bruke nettadressen til det bildet. Etter det, “Bakgrunnsrepetitt”Attributt brukes til å gjenta bildet på baksiden.

Produksjon

Det kan observeres at vi har laget den strukturerte bakgrunnen.

Konklusjon

For å lage strukturert bakgrunn, først, lage en "”Container. Legg deretter til to "" "containere på samme måte og tilordne dem klassene. Etter det får du tilgang til elementene ved å bruke sine respektive klasser og bruke “bakgrunnsbilde”Og“Bakgrunnsrepetitt" egenskaper. Dette innlegget har forklart prosedyren for å lage strukturert bakgrunn.