CSS flere baggrundsbilleder

I dette kapitel vil du lære, hvordan du tilføjer flere baggrundsbilleder til et element.

Du vil også lære følgende egenskaber:

  • background-size
  • background-origin
  • background-clip

CSS flere baggrundsbilleder

CSS giver dig mulighed for at bruge background-image Egenskaben tilføjer flere baggrundsbilleder til et element.

Forskellige baggrundsbilleder adskilles af kommaer, og billederne lægger sig oven på hinanden, hvor det første billede er nærmest tilskueren.

Følgende eksempel har to baggrundsbilleder, det første billede er en blomst (justeret til bunden og højre), det andet billede er en papirbaggrund (justeret til venstre og øverst):

eksempel

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: højre bund, venstre top;
  background-repeat: ikke gentage, gentage;
}

Prøv det selv

Flere baggrundsbilleder kan bruges ved hjælp af en separat baggrundsegenskab (som nævnt ovenfor) eller background kortformet egenskab til at specificere.

Følgende eksempel bruger background Kortformet egenskab (resultatet er det samme som i det tidligere eksempel):

eksempel

#example1 {
  baggrund: url(flower.gif) højre bund ikke gentage, url(paper.gif) venstre top gentage;
}

Prøv det selv

CSS baggrundsskala

CSS background-size Egenskaben tillader dig at specificere størrelsen på baggrundsbilledet.

Baggrundens størrelse kan specificeres ved længde, procent eller ved hjælp af en af følgende to nøgleord:contain eller cover.

Dette eksempelet justerer størrelsen på baggrundsbilledet til meget mindre end det oprindelige billede (i pixels):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Dette er koden:

eksempel

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Prøv det selv

background-size andens to mulige værdier er contain og cover.

contain nøgleordet vil skalere baggrundsbilledet til den størst mulige størrelse (men dens bredde og højde skal passe ind i indholdsområdet). Dette kan betyde, at der kan være nogle baggrundsområder, der ikke dækkes af baggrundsbilledet, afhængigt af forholdet mellem baggrundsbilledet og baggrundens placeringsområde.

cover nøgleordet vil skalere baggrundsbilledet, så indholdsområdet helt dækkes af baggrundsbilledet (dets bredde og højde er lig med eller større end indholdsområdet). Dette kan betyde, at nogle dele af baggrundsbilledet ikke er synlige i baggrundens placeringsområde.

Nedenstående eksempel viser contain og cover Brug:

eksempel

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Prøv det selv

Definere størrelsen på flere baggrundsbilleder

Ved håndtering af flere baggrundebackground-size Egenskaben kan også acceptere flere værdier til at specificere baggrundens størrelse (en liste adskilt af kommaer).

Dette eksempelet specificerer tre baggrundsbilleder, hver med en anden background-size værdi:

eksempel

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Prøv det selv

Fuld skærm baggrundsbillede

Nu ønsker vi, at baggrundsbilledet på websiden altid dækker hele browservinduet.

Specifikationerne er som følger:

  • Fylder hele siden med billedet (ingen tom plads)
  • Skalerer billedet efter behov
  • Centrerer billedet på siden
  • Udløser ikke rullemenu

Nedenstående eksempel viser, hvordan man gør det: Brug <html>-elementet (det <html>-element er altid mindst højden af browservinduet). Sæt derefter en fast og centreret baggrund på det. Til sidst juster størrelsen med background-size egenskaben:

eksempel

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Prøv det selv

Hero Image

Du kan også bruge forskellige baggrundsegenskaber på <div> for at oprette en Hero Image (en stor billede med tekst) og placere den, hvor du ønsker den.

eksempel

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Prøv det selv

CSS background-origin egenskab

CSS background-origin Egenskaben specificerer baggrundsbilledets placering.

Denne egenskab accepterer tre forskellige værdier:

  • border-box - baggrundsbilledet starter fra kantens øverste venstre hjørne
  • padding-box - baggrundsbilledet starter fra indrykningens øverste venstre hjørne (standard)
  • content-box - baggrundsbilledet starter fra indholdets øverste venstre hjørne

Nedenstående eksempel viser background-origin egenskaber:

eksempel

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Prøv det selv

CSS background-clip egenskab

CSS background-clip Egenskaben specificerer baggrunds tegningsområde.

Denne egenskab accepterer tre forskellige værdier:

  • border-box - baggrund tegner til kantens yderkant (standard)
  • padding-box - baggrund tegner til indrykningens yderkant
  • content-box - tegner baggrund i indholdsrammen

Nedenstående eksempel viser background-clip egenskaber:

eksempel

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Prøv det selv

CSS avancerede baggrundsegenskaber

Egenskab Beskrivelse
background En kort skrivemåde til at sætte alle baggrundsegenskaber i én deklaration.
background-clip Definer tegningsområdet for baggrunden.
background-image Angiv et eller flere baggrundsbilleder for et element.
background-origin Definer placeringen af baggrundsbilledet.
background-size Definer størrelsen af baggrundsbilledet.