CSS monikerroksinen tausta

Tässä luvussa opit, miten lisätä useita taustakuvia elementtiin.

Opit myös seuraavat ominaisuudet:

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

CSS monikerroksinen tausta

CSS sallii sinun lisätä useita taustakuvia elementtiin background-image Ominaisuus lisää useita taustakuvia elementtiin.

Eri taustakuvat erotetaan pilkulla, ja ne kerrostuvat toisiinsa, ensimmäinen kuva on lähempänä katsojaa.

Seuraavassa esimerkissä on kaksi taustakuvaa, ensimmäinen kuva on kukka (tasoituksena oikea alareuna), toinen kuva on paperi-tausta (tasoituksena vasen yläkulma):

esimerkki

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Kokeile itse

Monikerroksiset taustakuvat voidaan käyttää erillisenä taustaoMINAISUUDENA (kuten edellä mainittiin) tai background lyhennettyjä ominaisuuksia määrittämään.

Seuraavassa esimerkissä käytetään background Lyhennetty ominaisuus (tuloksena sama kuin edellisessä esimerkissä):

esimerkki

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Kokeile itse

CSS taustakoon säännöt

CSS background-size Atribuutti mahdollistaa taustakuvan kokon määrittämisen.

voidaan määrittää taustakuvan koko pituuden, prosentin tai seuraavilla avainsanoilla:sisältää tai cover.

Esimerkissä taustakuvan koko asetetaan paljon pienemmäksi kuin alkuperäinen kuva (pikseleinä):

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.

Tämä on koodi:

esimerkki

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

Kokeile itse

background-size toiset kaksi mahdollista arvoa ovat sisältää ja cover.

sisältää avainsana skaalauttaa taustakuvan mahdollisimman suureksi kokoon (mutta sen leveys ja korkeus täytyy sopia sisältöalueeseen). riippuen taustakuvan ja taustan sijoitusalueen suhteesta, voi olla joitakin taustan alueita, joita taustakuva ei peitä.

cover avainsanat skaalauttavat taustakuvan, jotta sisältöalue on täysin peitetty taustakuvalla (joka on leveä ja korkea vähintään yhtä suuri kuin sisältöalue). Tällöin jotkut taustakuvan osat voivat olla näkymättömiä taustan sijoitusalueessa.

Seuraava esimerkki näyttää sisältää ja cover Käyttötapa:

esimerkki

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

Kokeile itse

Määritä useiden taustakuvien koko

Kun käsitellään useita taustoja:background-size Atribuutti voi hyväksyä useita asetuksia taustakuvan koosta (pilkulla erotetun luettelon avulla).

Esimerkissä määritetään kolme taustakuvaa, joilla on eri background-size-arvot:

esimerkki

#example1 {
  background: url(tree.png) vasen yläkulma ei-toistuva, url(flower.gif) oikea alakulma ei-toistuva,; 
  	url(paper.gif) vasen yläkulma toistaa;
  background-size: 50px, 130px, auto;
}

Kokeile itse

Koko kokoonpanon taustakuvat

Nyt haluamme, että verkkosivuston taustakuvat peittävät aina koko selaimen ikkunan.

Tarkemmat vaatimukset ovat seuraavat:

  • täytetään koko sivu kuvalla (ei tyhjiä tiloja)
  • säädetään kuvan kokoa tarpeen mukaan
  • keskitetään kuva sivulla
  • ei aiheuta roolipalkkia

Seuraava esimerkki näyttää, miten voit toteuttaa sen: Käytä <html>-elementtiä (joka on aina vähintään selaimen ikkunan korkeus). Aseta sitten siihen kiinnitetty ja keskellä oleva tausta. Lopuksi mukauta sen kokoa background-size-ominaisuudella:

esimerkki

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

Kokeile itse

Hero Image

Voit käyttää erilaisia taustaominaisuuksia <div>-elementillä luodaksesi Hero Image (suuri kuva, jossa on teksti) ja asettaa sen haluamaasi paikkaan.

esimerkki

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

Kokeile itse

CSS background-origin ominaisuus

CSS background-origin Ominaisuus määrittää taustakuvan sijainnin.

Tämä ominaisuus hyväksyy kolme eri arvoa:

  • border-box - taustakuvan alkaa reunan vasemmassa yläkulmassa
  • padding-box - taustakuvan alkaa sisäpiirin vasemmassa yläkulmassa (oletus)
  • content-box - taustakuvan alkaa sisällön vasemmassa yläkulmassa

Seuraava esimerkki näyttää background-origin ominaisuudet:

esimerkki

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

Kokeile itse

CSS background-clip ominaisuus

CSS background-clip Ominaisuus määrittää taustan piirtoalueen.

Tämä ominaisuus hyväksyy kolme eri arvoa:

  • border-box - tausta piirretään reunan ulkorajoihin (oletus)
  • padding-box - tausta piirretään sisäpiirin ulkorajoihin
  • content-box - piirretään tausta sisällön kehykseen

Seuraava esimerkki näyttää background-clip ominaisuudet:

esimerkki

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

Kokeile itse

CSS edistyneet taustan ominaisuudet

Ominaisuus Kuvaus
background Yksinkertainen kieli lauseessa, jossa kaikki taustan ominaisuudet asetetaan.
background-clip Määrittää taustan piirtämisen alueen.
background-image Määrittää yhdelle elementille yhden tai useamman taustakuvan.
background-origin Määrittää taustakuvan asettamispaikan.
background-size Määrittää taustakuvan koko.