Bakgrunnsrepetisjon i CSS

Når vi setter et bakgrunnsbilde på en hvilken som helst webside som standard, blir bildet plassert øverst på venstre hjørne, og det vil bli gjentatt i både horisontale og vertikale retninger. CSS gir en bakgrunnsrepeterende egenskap for å administrere bildens repetisjonsatferd.

Vi kan utføre følgende funksjonaliteter ved å bruke egenskapen til bakgrunnsrepetisjon:

• Ingen repeter unngår repetisjon av bildet.
• Repeat-X gjentar et bilde i horisontal retning.
• gjenta gjentar et bilde i vertikal retning.
• rom gjentar bildet uten å klippe og lagt til plass mellom hver repetisjon
• rund gjentar og strekker bildet uten å legge til noe plass

Denne artikkelen vil diskutere alle ovennevnte bakgrunnsverdier med eksempler.

Eksempel
La oss begynne med standard bakgrunnsbildeegenskap.

Ovennevnte utdrag vil gi følgende utdata:

Så som standard gjentok bakgrunnsbildetegenskapen bildet horisontalt så vel som vertikalt.

Ingen gjentagelsesverdi

La oss se hva som vil skje når en verdi “Ingen repeter” vil bli tildelt bakgrunnsrepetisjonen:

Nå vises bakgrunnsbildet bare en gang. Dette eksemplet gir følgende utgang:

Repeat-X-verdi

La oss nå tildele “Repeat-x” til bakgrunnsrepetisjonseiendommen og legg merke til hvordan den fungerer:

La oss observere virkningen av "repeat-x" på bakgrunnsbilde i følgende utgang:

Fra output er det klart at det “Repeat-x” gjentar bildet bare horisontalt.

gjenta verdi

Tilsvarende, la oss tildele gjenta Verdi til egenskapen til bakgrunn:

Ovennevnte kode vil produsere følgende utgang:

Utgangen verifiserer det gjenta gjentatt bildet vertikalt.

romverdi

La oss bruke "rom" Verdi for egenskapen til bakgrunnsrepetisjon for å legge til de jevnlige mellomromene mellom bildene:

Ovennevnte skript vil gi følgende utdata:

rund verdi

Tilordne den "runde" verdien til den bakgrunnsrepeterende egenskapen vil passe til bildet i henhold til skjermstørrelsen:

Som et resultat vil vi få følgende utdata:

Flere bakgrunnsbilder gjenta

I CSS kan flere bakgrunnsbilder legges til et element, og det gitte eksemplet nedenfor vil utdype hvordan man kontrollerer repetisjonsatferden til flere bilder ved å bruke bakgrunnsrepetisjonsegenskap:

I koden ovenfor tar bakgrunnsbilde-egenskapen to nettadresser for å legge til to bakgrunnsbilder. I neste linje spesifiserer den bakgrunnsrepeterende egenskapen også to verdier i.e. Repeat-Y, Repeat-X. Repeat-y vil gjenta det første bildet vertikalt mens Repeat-X vil gjenta det andre bildet horisontalt:

Konklusjon

Bakgrunnsrepeterende egenskapen kontrollerer repetisjonsatferden til bakgrunnsbildet. Det avgjør om et bakgrunnsbilde vil gjenta eller ikke hvis ja, hvordan, jeg.e. vertikalt eller horisontalt.

Denne oppskrivningen ga en grundig oversikt over eiendomsrepetisjonseiendom i CSS. For det første bestemmer det hva som er verdiene som kan tilordnes den bakgrunnsrepeterende egenskapen. Etterpå forklarte det arbeidet med hver bakgrunnsrepetisjonsverdi i detalj sammen med eksemplene.