CSS taustan toistaminen

CSS taustakuva-toistotapa

Oletuksenataustakuva Ominaisuus toistaa kuvaa sekä horisontaalisesti että pystysuunnassa.

Jotkut kuvat sopivat vain horisontaaliseen tai pystysuuntaiseen toistoon, muuten ne näyttävät omituisilta, kuten seuraavassa kuvassa näkyy:

Esimerkki

body {
  taustakuva: url("gradient_bg.png");
}

Kokeile itse

Jos yllä oleva kuva toistetaan vain horisontaalisesti (taustakuva-toistotapa: toistetaan-x;)，taustakuva näyttää paremmalta:

Esimerkki

body {
  taustakuva: url("gradient_bg.png");
  taustakuva-toistotapa: toistetaan-x;
}

Kokeile itse

Vinkki:Jos haluat toistaa kuvaa pystysuunnassa, aseta taustakuva-toistotapa: toistetaan-y;.

CSS taustakuva-toistotapa: ei-toistoa

background-repeat Ominaisuus voi myös määrittää, että taustakuvaa näytetään vain kerran:

Esimerkki

Taustakuvan näyttäminen vain kerran:

body {
  background-image: url("tree.png");
  background-repeat: ei toisteta;
}

Kokeile itse

Yllä olevassa esimerkissä taustakuvan ja tekstin sijainti ovat samassa paikassa. Haluamme muuttaa kuvan sijaintia, jotta se ei häiritse tekstiä liikaa.

CSS background-position

background-position Ominaisuus määrittää taustakuvan sijainnin.

Esimerkki

Aseta taustakuvan sijainti oikeaan yläkulmaan:

body {
  background-image: url("tree.png");
  background-repeat: ei toisteta;
  background-position: oikea yläkulma;
}

Kokeile itse