Bakgrunnsbilde - CSS-triks

Anonim

Den background-imageegenskap i CSS gjelder en grafisk (f.eks PNG, SVG, JPG.webp, GIF, webp) eller gradering på bakgrunn av et element.

Det er to forskjellige typer bilder du kan inkludere med CSS: vanlige bilder og graderinger.

Bilder

Å bruke et bilde på en bakgrunn er ganske enkelt:

body ( background: url(sweettexture.jpg.webp); )

Den url()verdien gjør det mulig å gi en fil banen til et bilde, og det vil dukke opp som bakgrunn for dette elementet.

Du kan også angi en data-URI for url(). Det ser slik ut:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Denne teknikken fjerner en HTTP-forespørsel, noe som er bra. Men det er en rekke ulemper, så før du begynner å erstatte alle bildene dine, må du sørge for å vurdere alle fordeler og ulemper med Data URI.

Du kan også bruke background-imagetil å sprite bilder, som er en annen nyttig metode for å redusere HTTP-forespørsler.

Graderinger

Et annet alternativ når du bruker bakgrunner, er å be nettleseren om å lage en gradient. Her er et super-duper enkelt eksempel på en lineær gradient:

body ( background: linear-gradient(black, white); )

Du kan også bruke radiale graderinger:

body ( background: radial-gradient(circle, black, white); )

Teknisk sett er graderinger bare en annen form for bakgrunnsbilde. Forskjellen er at nettleseren lager bildet for deg. Slik skriver du dem: CSS3 Gradient Syntax

Eksemplet ovenfor bruker bare en gradient, men du kan også legge flere gradienter på hverandre. Det er noen ganske fantastiske mønstre du kan lage ved hjelp av denne teknikken.

Stille inn en reservefarge

Hvis et bakgrunnsbilde ikke lastes inn, eller hvis gradientbakgrunnen din vises i en nettleser som ikke støtter graderinger, vil nettleseren se etter en bakgrunnsfarge som en reserve. Du kan spesifisere reservefargen din slik:

body ( background: url(sweettexture.jpg.webp) blue; )

Flere bakgrunnsbilder

Du kan bruke flere bilder, eller en blanding av bilder og stigninger, for bakgrunnen din. Flere bakgrunnsbilder støttes nå (alle moderne nettlesere og IE9 + for grafiske bilder, IE10 + for stigninger).

Når du bruker flere bakgrunnsbilder, må du være oppmerksom på at det er en noe kontraintuitiv stabelrekkefølge. Oppgi bildet som skal være foran først, og bildet som skal være sist, slik:

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

Når du bruker flere bakgrunnsbilder, må du ofte angi flere verdier for bakgrunnen for å få alt på rett sted. Hvis du vil bruke backgroundstenografi, kan du stille inn verdiene for hvert bilde individuelt. Forkortelsen din vil se omtrent slik ut (legg merke til kommaet som skiller det første bildet og dets verdier fra det andre bildet og dets verdier):

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Det er ingen grense for hvor mange bakgrunnsbilder du kan angi, og du kan gjøre kule ting som å animere bakgrunnsbildene dine. Det er et godt eksempel på flere bakgrunnsbilder med animasjon på bloggen til David Walsh.

Demo

Se bakgrunnsbildet til pennen av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

  • bakgrunn-vedlegg
  • bakgrunn-klipp
  • bakgrunnsfarge
  • bakgrunn-opprinnelse
  • bakgrunn-posisjon
  • bakgrunn-gjenta
  • bakgrunnsstørrelse

Flere ressurser

  • CSS3-spesifikasjonen
  • MDN
  • Perfekte helsides bakgrunnsbilder
  • Mestring av CSS-gradienter (glidebane)

Nettleserstøtte

Vanlige bilder fungerer overalt, og flere bilder fungerer i moderne nettlesere og IE9 +. Her er støtten for stigninger:

Chrome Safari Firefox Opera DVS Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+