Hvordan legge til morsomme CSS-bakgrunner til nettstedene dine

Sep 15, 2025

hvordan

[1. 3]

Tiden var en nettsidebakgrunn var et lite flisleggende bilde - og ofte skjult, angrep hvert besøkendes øyeboll. I dag danner bakgrunnen grunnlaget for mye online grafisk design.

Denne revolusjonen i bakgrunnen på nettet har blitt drevet av fremskritt i CSS. Webstandarder har nå gitt langt mer kontroll, slik at du kan nøye definere en bakgrunns posisjon, jobbe med gradienter, og legge til flere bakgrunner til et enkelt element.

Å dekke alt i dette området ville kreve en bok, og så har vi plukket noen viktige utgangspunkt for å komme deg, og den odde valgforbindelsen for deg å utforske videre. Nyt!

Legg til CSS-bakgrunner til websiden elementer

CSS-bakgrunner krever bakgrunn Shorthand eiendom, eller bruk av mer spesifikke egenskaper, for eksempel (men ikke begrenset til): bakgrunnsfarge ; bakgrunnsbilde ; bakgrunnsposisjon ; bakgrunnsstørrelse ; bakgrunn-gjenta ; og bakgrunnsbilde . Disse kan defineres for nettsidenes bakgrunn (gjennom kropp velger) eller sideelementer som overskrifter, divs, og så videre.

På det mest grunnleggende nivået kan du bruke bakgrunn å slå en side rød:

 Kropp {
 Bakgrunn: Rød;
 }

Går litt mer avansert, kan du legge til et bilde som er horisontalt sentrert, 20px fra toppen av beholderen, ikke gjentas, og festet på plass som nettsiden ruller:

 Kropp {
 Bakgrunn: URL (image.png) Senter 20px Nei-gjenta fast;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Et bilde som bakgrunn (MERK: Unngå dette lave kontrastnivået i dine egne design)

Hvis du ønsket å skrive det uten å bruke bakgrunn Shorthand, det ville se slik ut:

 Kropp {
 Bakgrunnsbilde: URL (image.png);
 bakgrunn-posisjon: senter 20px;
 Bakgrunn-Gjenta: Nei-gjenta;
 Bakgrunnsbestilling: Fast;
 }

Skulle du legge til flere bakgrunner til et element, kan du komma-separate verdi sett i CSS-erklæringen. Merk at det som er spesifisert som først er spesifisert, er øverst på stabelen, noe som betyr at den blir vist "over" andre bakgrunner.

 Kropp {
 Bakgrunn: URL (image.png) Senter 20px No-Repeat Fixed, URL (Image-2.png) Center Center No-Repeat Fast;
 }

I dette tilfellet vises ett bilde som per i forrige eksempel, og den ene "nedenfor" direkte i midten av innholdsområdet.

Endre størrelsen på bakgrunnsbilder

Så langt har vi unngått bakgrunnsstørrelse . Men det er ganske viktig, fordi det gjør at du kan kontrollere størrelsen på et bakgrunnsbilde. Spesielt kan du definere de horisontale og vertikale dimensjonene på et bilde i piksler eller prosentvis vilkår, for eksempel:

 Bakgrunnsstørrelse: 200px 50px;

Det er også to søkeordverdier, som kan brukes i stedet: inneholde og dekke . Disse er bredt lik, i å gi en måte å skalere et bilde i et elements innholdsområde. Forskjellen er det inneholde er designet for å gjøre et bilde så stort som mulig, mens du fortsatt viser alt i innholdsområdet (noe som betyr at du vanligvis får hull rundt det), mens dekke Helt dekker innholdsområdet, men kan føre til at noe av bildet ikke er synlige. Sistnevnte brukes ofte på nettsteder som bruker fotografier som bakgrunner.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'inneholder' (topp) versus 'deksel' (nederst) verdier

Merk at du kan legge til bakgrunnsstørrelse til A. bakgrunn Shorthand Definition - Legg det etter bakgrunnsposisjon verdier, med fremoverskrude som skiller de to:

 Bakgrunn: URL (image.png) senter 20px / inneholder ingen gjentatt fast

Bruk High Resh Res Retina Bakgrunnsbilder

Når du legger til high res retina bakgrunner, bakgrunnsstørrelse er også nyttig for å tvinge slike bilder å vises i riktig størrelse.

For eksempel, forestill deg en div. med en id. av logo. . Dette har hensiktsmessig en logo påført som bakgrunn i CSS. Det er 150 piksler torget, og så de grunnleggende CSS du vil bruke er:

 #Logo {
 Bredde: 150px;
 Høyde: 150px;
 Bakgrunn: URL (logo.png) Nei-gjenta;
 }

High-res kompliserer ting. Vi ønsker ikke å tvinge eldre maskinvare for å laste større bilder, og så må en medieforespørsel brukes til å laste inn logoen for høyere oppløsning bare på støttet maskinvare.

 @Media (-Webkit-min-enhet-pixel-forhold: 2),
 (min-oppløsning: 192dpi) {
  #logo {
   bakgrunnsbilde: URL ([email protected]);
  }
 }

Problemet nå er @ 2x høyoppløselig bildet er 300 piksler torget (siden det har to ganger oppløsningen av originalen), men brukes som bakgrunn for en 150-piksler-firkantet beholder. Så på dette punktet ser du bare en fjerdedel av den.

A high-res image before a resize fix — Et høyoppløselig bilde før en resize-løsning

Dette er fastsatt ved å tildele en bestemt bakgrunnsstørrelse Verdi for #logo. :

 #Logo {
 Bredde: 150px;
 Høyde: 150px;
 Bakgrunn: URL (logo.png) Nei-gjenta;
 Bakgrunnsstørrelse: 150px 150px;
 }

Den høyoppløselige logoen, nå tettsittende inne i beholderen

En mer moderne metode for å arbeide med flere bakgrunnsoppløsninger og oppnå det samme resultatet er CSS4s Bilde-sett :

 #Logo {
 Bakgrunnsbilde: Bilde-sett (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

Fordelene av Bilde-sett er enklere CSS, og brukeragenten bestemmer bildet som skal brukes. Ulempen er nettleserstøtte - på tidspunktet for skriving - forblir ufullstendig. Besøk denne testsiden For en rask måte å sjekke hvordan nettlesere du støtter billettpris. (Dette er kanskje hvorfor mange designere Bruk skript til å automatisere servering av høyresmerter .)

Arbeid med Alpha-kanaler og gradienter

Vårt siste tips i denne brennende raske (i Website Tutorial Vilkår) artikkel angår alfa-kanaler og gradienter. Når Internett var dampdrevet, hadde du ofte designere bruke 'checkerboard' gifs for å simulere Alpha-kanaler (hver annen piksel var gjennomsiktig). Nå tilordner du bare farger i RGBA:

 Hoved {
 Bakgrunn: RGBA (255,255,255,0,7);
 }

I eksemplet ovenfor vil bakgrunnen være 70 prosent hvit, slik at det er under det å vise seg gjennom. Du må være forsiktig med å beholde klarhet når du bruker semi-gjennomsiktige bakgrunner som er over komplekse bilder, men de kan være gode for å legge til visuell interesse for nettsider.

Alpha channels, gradients, and some questionable colour choices — Alpha-kanaler, gradienter og noen tvilsomme fargevalg

På samme måte pleide webdesignere å sende og fliser gifs hvis de ønsket en gradient som bakgrunn, men det er ikke lenger nødvendig heller, med mindre du vil feste som det er 1999. I dag vil du ha lyst på CSS3 lineær gradient og radial-gradient. Egenskaper, som du definerer retninger og farge stopper.

Her er en CSS-regel med en grunnleggende gradient:

 h1 {
 Bakgrunn: Lineær gradient (til høyre, RGBA (255,255,255,1), RGBA (255,255,255,0);
}

Dette ville bli brukt på nivå-ett-overskrifter, noe som gir dem en lineær gradient som går fra venstre til høyre, som starter med solid hvit og slutter i gjennomsiktig hvitt.

Ved hjelp av vinkler og flere fargestopp, kan du gå mye, mye lenger med gradienter. For å eksperimentere, prøv å bruke en Photoshop-lignende CSS Gradient Generator og undersøker kodeutgangen (å være oppmerksom på det koblede eksemplet legger til syntaks for eldre nettlesere - bare ta tak i lineær gradient linje for din egen bruk).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Som CSS-mønstrene viser, kan du virkelig fancy ting med CSS-gradienter

Hvis du har lyst på å sjekke ut hva erfarne webprofessorer kan gjøre med gradienter og bakgrunnsstørrelse , sjekk ut Lea Verou's CSS3 Mønster Gallery . Der finner du massevis av levende eksempler som bruker CSS-gradienter for å skape alle slags seriøst imponerende bakgrunnsmønstre.

Og ja, det er et snev av hvor vi kom inn på øyeballager i noen av dem.Men som med alt når det gjelder webbakgrunner, er nøkkelen til å sikre hva du legger til, er relevant i sammenheng med design og - viktigst av alt - at bakgrunnen ikke distraherer fra innhold, eller gjør det uleselig.

Relaterte linker:

En veiledning for å skrive bedre CSS
Opprett et responsivt layout med CSS-rutenett
CSS triks for å revolusjonere layoutene dine

Hvordan legge til morsomme CSS-bakgrunner til nettstedene dine

Legg til CSS-bakgrunner til websiden elementer

Endre størrelsen på bakgrunnsbilder

Bruk High Resh Res Retina Bakgrunnsbilder

Arbeid med Alpha-kanaler og gradienter

hvordan - Mest populære artikler

Bruk hjerne.js for å bygge et nevralt nettverk

Hvordan lage Pin-Up Art

Lag en kromatisk aberreringseffekt

Hvordan lage og bruke en mahlstick for å male

Lag en glidelåsemeny

Hvordan skulptur i kino 4d

Mal en episk New York Scene

Kom i gang i Amazon Lumberyard: Sette opp

Kategorier