CSS er et akronym for Cascading Style Sheets. Det er et simpelt, men alligevel stærkt designsprog, der har evnen til at omdanne websider. Enkelt sagt strømliner det processen med at gøre websider præsentable og appellerer til brugerne ved hjælp af . I denne artikel vil vi forstå, hvordan man implementerer forskellige baggrundsbilleder i CSS i følgende rækkefølge:
- Baggrundsbillede i CSS-egenskaber
- Baggrundsbillede i CSS
- Baggrund Gentag
- Vedhæftet baggrund
- Baggrundsposition
- Baggrundsbillede i CSS-størrelse
- Baggrundsfarve
Baggrundsbillede i CSS-egenskaber
Der er mange egenskaber, der bruges til at kontrollere billedets opførsel og placering. Disse egenskaber er:
- baggrundsbillede
- baggrund-gentagelse
- baggrund-vedhæftet fil
- baggrund-position
- baggrundsstørrelse
- baggrundsfarve
Vi bliver fortrolige med hver af disse egenskaber og ser, hvornår og hvordan vi bruger dem med en interessant demonstration.
java erklære matrix af objekter
Baggrundsbillede i CSS
Det baggrundsbillede egenskab, som navnet antyder, bruges simpelthen til at angive og indstille baggrundsbilledet gennem et element på en webside. Et baggrundsbillede er som standard placeret i øverste venstre hjørne af et element.
syntaks: baggrundsbillede: url | none | lineær-gradient | radial-gradient
body {baggrundsbillede: url ('apple.jpg')}baggrund ved hjælp af url
Lad os forstå parametrene:
- url: Input til denne parameter giver os mulighed for at specificere enten en filsti til et hvilket som helst billede eller URL til billedet, der skal indstilles som baggrund. For at erklære mere end et billede adskilles urlerne med en komma-afgrænser.
body {baggrundsbillede: url ('apple.jpg')} 
- ingen: Dette er egenskabens standardværdi, og der gengives ikke noget baggrundsbillede, hvis dens værdi er angivet.
krop {baggrund: ingen}- lineær gradient (): Baggrundsbilledet er indstillet til en lineær gradient. Der kræves et minimum på mindst to farver for denne egenskab, dvs. for top til bund.
krop {baggrundsfarve: # 001 baggrundsbillede: lineær gradient (hvid 15%, gennemsigtig 16%), lineær gradient (hvid 15%, gennemsigtig 16%) baggrundsstørrelse: 60 px 60 pix baggrundsposition: 0 0, 30px 30px}- radial-gradient (): Baggrundsbilledet er indstillet til en radial gradient. Der kræves et minimum på mindst to farver for denne egenskab, dvs. for centrum til kanter.
krop {baggrundsfarve: # 001 baggrundsbillede: radialgradient (hvid 15%, gennemsigtig 16%), radialgradient (hvid 15%, gennemsigtig 16%) baggrundsstørrelse: 60px 60px baggrundsposition: 0 0, 30px 30px}- gentagende-lineær-gradient (): Det gentager en lineær gradient. Lad os bruge det samme eksempel, som vi så ovenfor i den lineære gradient til gentagelse-lineær-gradient og se forskellen.
krop {baggrundsfarve: # 001 baggrundsbillede: gentagende-lineær-gradient (hvid 15%, gennemsigtig 16%), gentaget-lineær-gradient (hvid 15%, gennemsigtig 16%) baggrundsstørrelse: 60 px 60 pix baggrundsposition : 0 0, 30px 30px}- gentagende-radial-gradient (): Det gentager en radial gradient. Lad os udforske det samme eksempel, som vi brugte ovenfor i en radial gradient.
krop {baggrundsfarve: # 001 baggrundsbillede: gentagende-radial-gradient (hvid 15%, gennemsigtig 16%), gentagende-radial-gradient (hvid 15%, gennemsigtig 16%) baggrundsstørrelse: 60 px 60 pix baggrundsposition : 0 0, 30px 30px}Tilbagefaldsbaggrund
Det tilrådes altid som et professionelt tip at tilføje en baggrundsfarve som en alternativ mulighed. Det kommer til at redde, især når enten baggrundsbillederne ikke indlæses, eller den gradientbaggrund, vi indstiller under udviklingen, ikke understøttes af nogle af de gamle browsere, den vises på.
Dette ødelægger ikke brugeroplevelsen og kan erklæres således:
body {baggrund: url (apple_lost.jpg) pink}Flere baggrunde
Vi har også en mulighed for at indstille flere baggrundsbilleder, og det kræves i de fleste tilfælde som en forgrund og et baggrundsbillede. Rækkefølgen af billedet er vigtig her, billedet, der skal være forrest, erklæres først, og billedet, der skal være bagest, erklæres derefter.
Nedenfor er eksemplet for flere baggrundsbilleder:
body {baggrundsbillede: url ('small-heart.jpg'), url ('background.jpg')}læse og skrive excel-fil i java
Baggrund Gentag
Baggrunds-gentagelsesegenskaben bruges sammen med baggrundsbilledet til at definere et billedes gentagelsesadfærd. Den specificerer, om og hvordan et baggrundsbillede gentages. Baggrundsbilledet gentages som standard både lodret og vandret.
De mulige værdier er:
- gentagelse - Billedet gentages både vandret og lodret
- ingen gentagelse - Billedet gentages ikke
- repeat-x - Billedet gentages vandret
- gentag-y - Billedet gentages lodret
- mellemrum - Billedet gentages med jævne mellemrum eller mellemrum imellem.
- runde - Billedet gentages for at udfylde området uden mellemrum mellem dem.
CSS-syntaksen for baggrunds-gentagelsesegenskaben er:
baggrund-gentagelse: gentag | gentag-x | gentag-y | ingen gentag | mellemrum | runde
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Vedhæftet baggrund
Det baggrund-vedhæftet fil egenskab bruges sammen med baggrundsbilledet til at angive, om billedet skal rulle eller ikke, når indholdet rulles. Det betyder, at baggrundsbilledet skal være rettet eller skal rulle sammen med dokumentet i forhold til browservinduet. Standardværdien er at rulle.
De mulige værdier er:
- rul - Billedet ruller sammen med siden.
- fast - Billedet ruller ikke sammen med siden
CSS-syntaksen for baggrundsvedhæftningen er:
baggrund-vedhæftet fil: rul | fast
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Baggrundsposition
Det baggrund-position egenskab bruges til at angive placeringen eller placeringen af et baggrundsbillede. De mulige værdier er:
- top
- ret
- bund
- venstre
- centrum
- kombination af disse værdier (f.eks. venstre øverst)
CSS-syntaksen for baggrundspositionen er:
baggrund-position: øverst | højre | venstre | nederst | center
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Baggrundsbillede i CSS-størrelse
Denne egenskab er en af de mest nyttige, da den giver os mulighed for at kontrollere størrelsen på baggrundsbilledet. Der er forskellige kombinationer, vi kan anvende med denne ejendom og få resultater i overensstemmelse hermed. Standardværdien er auto.
Følgende værdier kan bruges med baggrundsstørrelse:
- auto
- en længde- og bredde på billedet f.eks. 20px 40px.
- en procent- højde og bredde af billedet som en procentdel w.r.t overordnet element f.eks. 50% 50%.
- center- Juster billedet til midten
- dække, skalering af billedet til helt at dække efter baggrundsområdet.
- indeholder, skalering af billedet, så det passer til dets faktiske højde og bredde.
CSS-syntaksen for baggrundspositionen er:
baggrundsstørrelse: værdi
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}Baggrundsfarve
Dette er den enkleste af alle egenskaber i CSS. Det anvender solide farver på baggrunden af siden. Værdien for denne egenskab kan angives i farver (f.eks. Rød, blå osv.), Hex-værdi og RGB-værdi.
CSS-syntaksen for baggrundsfarven er:
baggrundsfarve: værdi
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Dette afslutter alle de egenskaber, vi kan bruge med baggrunden. Vi kan altid prøve forskellige kombinationer af egenskaberne, som vi så i vores demonstration.
CSS er afgørende og skal tilegne sig færdigheder til alle front-end webudviklere. Det hjælper, når du designer og styler baggrunden og bygger imponerende websteder og beriger brugeroplevelsen. Det bedste er at fortsætte med at eksperimentere og drage fuld fordel af denne specielle front-end teknologi, da den kan gøre underværker og dynamisk omdanne siden.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
konvertere decimal til binær pythonkode
Har du et spørgsmål til os? Nævn det i kommentarfeltet på 'Baggrundsbillede i CSS' -blog, så vender vi tilbage til dig.