CSS bakgrunn Shorthand -eiendom

CSS bakgrunn Shorthand -eiendom
CSS gir flere egenskaper som hjelper til med å opprette et fascinerende nettsted, og bakgrunnsegenskapen er en av de viktigste egenskapene som lar oss angi bakgrunnen for ethvert spesifikt element, webside, etc. Individuelt utfører hver egenskap en unik funksjonalitet, men CSS gir noen funksjonaliteter for å kombinere flere egenskaper i en enkelt eiendom. Å kombinere flere bakgrunnsegenskaper i en enkelt bakgrunnseiendom er kjent som bakgrunnen Shorthand -eiendommen.

Bakgrunn Shorthand -eiendom

Det er en kortfattet eiendom som kan ta flere verdier samtidig. Det er en kortvarig metode for følgende egenskaper:

  • Bakgrunnsrepetitt
  • bakgrunnsbilde
  • Bakgrunnsinnveksling
  • bakgrunnsstørrelse
  • bakgrunnsfarge
  • Bakgrunnsposisjon
  • Bakgrunn-opprinnelse
  • Bakgrunnsklipp

Bakgrunnsegenskapen er representert av "bakgrunn". Du kan kombinere noen av de ovennevnte egenskapene i bakgrunn Shorthand -eiendom etter ditt behov.

Syntaks

Bakgrunnen Shorthand -egenskapen følger følgende syntaks:

Bakgrunn: bakgrunnsfargede bakgrunnsbilde bakgrunnsrepetitt;

Fra ovennevnte syntaks kan det observeres at bakgrunn Shorthand -eiendom tar flere egenskaper atskilt med plassen. Bakgrunnsegenskapen følger en spesifikk ordre for å spesifisere flere egenskaper.

Her, før du hopper videre til bakgrunnsegenskapene, vil vi først forstå hvordan disse egenskapene fungerer som individ. Derfor vil vi vurdere noen av de viktigste bakgrunnsegenskapene sammen med eksempler.

bakgrunnsfarge

En egenskap som bestemmer bakgrunnsfargen til et element.

Eksempel
Dette eksemplet vil sette lyseblå farge som bakgrunnsfarge på kroppselementet:



Bakgrunnsfarge CSS



Bakgrunnsbilde


Velkommen til Linuxhint.com



Utgangen fra ovennevnte kode vil være slik:

bakgrunnsbilde

Bakgrunnsbildeegenskapen brukes til å implementere enkelt- eller flere bilder på bakgrunn av et element.

Eksempel
Denne undergitte koden vil legge til et bilde ved hjelp av bakgrunnsbilde eiendom:



Bakgrunnsbilde CSS



Bakgrunnsbilde


Velkommen til Linuxhint.com



Vi får følgende utdata:

Bakgrunnsrepetitt

Bakgrunnsrepeterende egenskap aktiver eller deaktiver repetisjonen for bakgrunnsbildet. Som standard gjentas bildet i begge retninger i.e. horisontal vertikal. Imidlertid ved å bruke bakgrunnsrepeteregenskap kan vi stille inngående etter vårt behov e.g. Repeat-y for vertikal repetisjon, repetisjon-x for horisontal repetisjon, eller ingen repetisjon for å unngå repetisjon.

Eksempel
I det forrige eksemplet spesifiserte vi ikke den bakgrunnsrepeterende egenskapen, derfor gjentas bildet som gjentas i horisontalt så vel som vertikalt. Imidlertid bruker den undergitte koden den ikke-gjentatte verdien for å deaktivere repetisjonen:



Bakgrunnsbilde CSS



Bakgrunnsbilde


Velkommen til Linuxhint.com



Nå denne gangen vil bakgrunnsbildet bare vises en gang som vist i følgende utgang:

Bakgrunnsposisjon

Bakgrunnsposisjonsegenskapen bestemmer plasseringen av bakgrunnsbilde som venstre, topp, høyre, bunn osv.

Eksempel
Det gitte eksemplet nedenfor vil sette bakgrunnsbildet til midten av siden:



Bakgrunnsbilde CSS



Bakgrunnsbilde


Velkommen til Linuxhint.com



Ovennevnte kode vil produsere følgende utgang:

Tilsvarende er det noen andre egenskaper som kan brukes til bakgrunnen som:

  • Bakgrunnsinnstillinger spesifiserer enten bildet blir løst for hele siden, eller det kan bla
  • Bakgrunnsstørrelse brukes til å angi størrelsen på bakgrunnsbildet
  • Bakgrunn-opprinnelse bestemmer opprinnelsen til bakgrunnsbilde

Bakgrunn Shorthand -eiendomsordre

Mens vi jobber med bakgrunnsbilder, må vi definere egenskapene i en spesifikk rekkefølge som vist nedenfor:

  • Vi må skrive bakgrunnsfargen først
  • Da er den andre verdien for bakgrunnsbildet
  • Tredje verdi er spesifisert for bakgrunnsrepetisjonen
  • Bakgrunnen kommer etter bakgrunnsrepetisjonen
  • Etterpå er verdien av bakgrunnsstilling skrevet

Vi kan hoppe over enhver eiendom avhengig av scenariet, men vi må skrive de andre egenskapene i riktig ordre.

Eksempel
I det forrige (bakgrunnsposisjonen) eksemplet benyttet vi tre forskjellige egenskaper. Vi skriver hver egenskap separat som er en tid tatt prosess. Imidlertid kan disse egenskapene grupperes i en egenskap som vist nedenfor:



Bakgrunnsbilde CSS



Bakgrunnsbilde


Velkommen til Linuxhint.com



I den ovennevnte koden skriver vi tre egenskaper: bakgrunnsbilde, bakgrunnsrepetitt og bakgrunnsposisjon innenfor Shorthand Background Property. Det vil vise følgende utgang:

Konklusjon

Bakgrunnen Shorthand -eiendom lar oss sette flere bakgrunnsegenskaper innenfor en enkelt eiendom samtidig. Bakgrunnen Shorthand -egenskapene følger en spesifikk ordre for å angi flere egenskaper i bakgrunnseiendommen. I denne oppskrivningen har vi lært hva som er en bakgrunnsbilder, hvilke egenskaper som kan brukes i bakgrunn eiendom. Etterpå bestemmer denne artikkelen en spesifikk ordre for egenskapene.