CSS taustan lyhyt muoto

CSS background - lyhyt muoto

Jos haluat lyhentää koodia, voit määritellä kaikki taustan ominaisuudet yhdessä ominaisuudessa. Tämä kutsutaan lyhyt muodoksi.

Eikä tarvitse kirjoittaa tätä tavalla:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Voit käyttää lyhyttä muotoa background:

Esimerkki

Aseta taustan ominaisuudet yhdellä lauseella lyhyt muoto.

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

Kokeile itse

Kun käytät lyhyttä muotoa, arvojen järjestys on:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Jos yksi arvo puuttuu, se ei ole ongelma, aseta vain muiden arvot tässä järjestyksessä. Huomaa, että yllä olevassa esimerkissä emme käyttäneet background-attachment ominaisuutta, koska sillä ei ollut arvoa.

Kaikki CSS:ää taustan ominaisuudet

Ominaisuus Kuvaus
background Aseta kaikki taustan ominaisuudet yhdellä lauseella lyhyt muoto.
background-attachment Aseta, onko taustakuvan liikkuminen kiinteää vai seurataanko sivun muiden osien liikkumista.
background-clip Määritä taustan piirtämisen alue.
background-color Aseta elementin taustaväri.
background-image Aseta elementin taustakuvaksi.
background-origin Määritä, missä sijainnissa taustakuvan asetetaan.
background-position Määrittää taustakuvan alkuperäisen sijainnin.
background-repeat Määrittää taustakuvan toistot ja toistotavan.
background-size Määrittää taustakuvan kokoonpanon.