CSS er et akronym for Cascading Style Sheets. Det er et enkelt, men kraftig designspråk som har muligheten til å transformere websider. Enkelt sagt strømlinjeformer det prosessen med å gjøre websider presentable og appellerer til brukerne ved hjelp av . I denne artikkelen vil vi forstå hvordan du implementerer forskjellige bakgrunnsbilder i CSS i følgende rekkefølge:
- Bakgrunnsbilde i CSS-egenskaper
- Bakgrunnsbilde i CSS
- Bakgrunn Gjenta
- Bakgrunnsvedlegg
- Bakgrunnsposisjon
- Bakgrunnsbilde i CSS-størrelse
- Bakgrunnsfarge
Bakgrunnsbilde i CSS-egenskaper
Det er mange egenskaper som brukes til å kontrollere atferd og posisjonering av bildet. Disse egenskapene er:
- bakgrunnsbilde
- bakgrunn-gjenta
- bakgrunn-vedlegg
- bakgrunn-posisjon
- bakgrunnsstørrelse
- bakgrunnsfarge
Vi vil bli kjent med hver av disse egenskapene og se når og hvordan vi kan bruke dem med en interessant demonstrasjon.
Bakgrunnsbilde i CSS
De bakgrunnsbilde egenskapen som navnet antyder brukes ganske enkelt til å indikere og sette bakgrunnsbildet gjennom et element på en webside. Et bakgrunnsbilde er som standard plassert øverst til venstre i et element.
syntaks: bakgrunnsbilde: url | ingen | lineær-gradient | radial-gradient
body {bakgrunnsbilde: url ('apple.jpg')}bakgrunn ved hjelp av url
La oss forstå parametrene:
- url: Inngangen til denne parameteren lar oss spesifisere enten en filsti til et hvilket som helst bilde eller URL til bildet som må angis som bakgrunn. For å erklære mer enn ett bilde, skilles urlene med en kommaavgrenser.
body {bakgrunnsbilde: url ('apple.jpg')} 
- ingen: Dette er standardverdien for eiendommen, og det blir ikke gjengitt noe bakgrunnsbilde hvis verdien er spesifisert.
kropp {bakgrunn: ingen}- lineær gradient (): Bakgrunnsbildet er satt til en lineær gradient. Det kreves et minimum på minst to farger for denne egenskapen, dvs. fra topp til bunn.
kropp {bakgrunnsfarge: # 001 bakgrunnsbilde: lineær gradient (hvit 15%, gjennomsiktig 16%), lineær gradient (hvit 15%, gjennomsiktig 16%) bakgrunnsstørrelse: 60px 60px bakgrunnsposisjon: 0 0, 30px 30px}- radialgradient (): Bakgrunnsbildet er satt til en radiell gradient. Det kreves et minimum på minst to farger for denne egenskapen, dvs. for senter til kanter.
kropp {bakgrunnsfarge: # 001 bakgrunnsbilde: radialgradient (hvit 15%, gjennomsiktig 16%), radialgradient (hvit 15%, transparent 16%) bakgrunnsstørrelse: 60px 60px bakgrunnsposisjon: 0 0, 30px 30px}- repeterende-lineær-gradient (): Den gjentar en lineær gradient. La oss bruke det samme eksemplet som vi så ovenfor i den lineære gradienten for repeterende-lineær-gradient og se forskjellen.
kropp {bakgrunnsfarge: # 001 bakgrunnsbilde: repeterende-lineær-gradient (hvit 15%, gjennomsiktig 16%), repeterende-lineær-gradient (hvit 15%, gjennomsiktig 16%) bakgrunnsstørrelse: 60px 60px bakgrunnsposisjon : 0 0, 30px 30px}- repeterende-radial-gradient (): Den gjentar en radiell gradient. La oss utforske det samme eksemplet som vi brukte ovenfor i en radial gradient.
kropp {bakgrunnsfarge: # 001 bakgrunnsbilde: repeterende-radial-gradient (hvit 15%, gjennomsiktig 16%), repeterende-radial-gradient (hvit 15%, gjennomsiktig 16%) bakgrunnsstørrelse: 60px 60px bakgrunnsposisjon : 0 0, 30px 30px}Tilbake Bakgrunn
Det anbefales alltid som et profesjonelt tips å legge til en bakgrunnsfarge som et alternativ. Det kommer til å redde, spesielt når enten bakgrunnsbildene ikke lastes inn eller gradientbakgrunnen vi satte mens vi utviklet, ikke støttes av noen av de gamle nettleserne den vises på.
Dette ødelegger ikke brukeropplevelsen og kan erklæres slik:
kropp {bakgrunn: url (apple_lost.jpg) rosa}Flere bakgrunner
Vi har også et alternativ å angi flere bakgrunnsbilder, og det er nødvendig i de fleste tilfeller som forgrunn og bakgrunnsbilde. Rekkefølgen av bildet er viktig her, bildet som skal være foran blir erklært først, og bildet som skal være bakerst sist blir erklært neste.
Nedenfor er eksemplet for flere bakgrunnsbilder:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Bakgrunn Gjenta
Egenskapen bakgrunn-gjenta brukes sammen med bakgrunnsbildet for å definere gjentagelsesoppførselen til et bilde. Den spesifiserer om og hvordan et bakgrunnsbilde skal gjentas. Bakgrunnsbildet gjentas som vertikalt og horisontalt.
De mulige verdiene er:
- repeter- Bildet gjentas både horisontalt og vertikalt
- no-repeat - bildet gjentas ikke
- repeat-x - Bildet gjentas horisontalt
- repeat-y - Bildet gjentas vertikalt
- mellomrom - Bildet gjentas med jevne mellomrom eller mellomrom mellom.
- runde - Bildet gjentas for å fylle området uten noen mellomrom mellom dem.
CSS-syntaksen for bakgrunn-gjenta-egenskapen er:
bakgrunn-gjenta: gjenta | gjenta-x | gjenta-y | nei-gjenta | mellomrom | runde
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Bakgrunnsvedlegg
De bakgrunn-vedlegg egenskap brukes sammen med bakgrunnsbildet for å angi om bildet skal rulle eller ikke når innholdet rulles. Det betyr at bakgrunnsbildet skal fikses eller skal bla sammen med dokumentet i forhold til nettleservinduvisningen. Standardverdien er å bla.
De mulige verdiene er:
- bla - Bildet ruller sammen med siden.
- fast - Bildet vil ikke rulle sammen med siden
CSS-syntaksen for bakgrunnsvedlegget er:
bakgrunn-vedlegg: bla | løst
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Bakgrunnsposisjon
De bakgrunn-posisjon egenskap brukes til å betegne plasseringen eller plasseringen av et bakgrunnsbilde. De mulige verdiene er:
- topp
- Ikke sant
- bunn
- venstre
- senter
- kombinasjon av disse verdiene (f.eks. venstre øverst)
CSS-syntaksen for bakgrunnsposisjonen er:
bakgrunnsposisjon: øverst | høyre | venstre | nederst | sentrum
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Bakgrunnsbilde i CSS-størrelse
Denne egenskapen er en av de mest nyttige, da den lar oss kontrollere størrelsen på bakgrunnsbildet. Det er forskjellige kombinasjoner vi kan benytte med denne eiendommen og få resultater tilsvarende. Standardverdien er auto.
Følgende verdier kan brukes med bakgrunnsstørrelse:
- auto
- en lengde- og bredde på bildet f.eks. 20px 40px.
- en prosent- høyde og bredde på bildet som en prosentandel med foreldreelement f.eks. 50% 50%.
- midt- Juster bildet til midten
- dekker, og skalerer bildet slik at det dekkes helt etter bakgrunnsområdet.
- inneholder, og skalerer bildet slik at det passer til dets faktiske høyde og bredde.
CSS-syntaksen for bakgrunnsposisjonen er:
bakgrunnsstørrelse: verdi
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contain, 400px 150px}Bakgrunnsfarge
Dette er den enkleste av alle eiendommer i CSS. Det bruker solide farger på bakgrunnen på siden. Verdien for denne egenskapen kan spesifiseres i farger (f.eks. Rød, blå osv.), Hex-verdi og RGB-verdi.
CSS-syntaksen for bakgrunnsfargen er:
hva er en sqlite-nettleser
bakgrunnsfarge: verdi
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Dette avslutter alle egenskapene vi kan bruke med bakgrunnen. Vi kan alltid prøve forskjellige kombinasjoner av eiendommene som vi så i demonstrasjonen.
CSS er viktig og må tilegne seg ferdigheter for alle front-end webutviklere. Det hjelper mens du designer og styler bakgrunnen og bygger imponerende nettsteder og beriker brukeropplevelsen. Det beste er å fortsette å eksperimentere og dra full nytte av denne spesielle frontend-teknologien, da den kan gjøre underverker og dynamisk forvandle siden.
Sjekk ut vår som kommer med instruktørledet live-opplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet i 'Bakgrunnsbilde i CSS' -bloggen, så kommer vi tilbake til deg.