Omadus background-origin

Omadus background-origin määrab, kuidas taustapilt (täpsemalt pilt, mitte värvimine) paigutatakse elemendi suhtes: osa taustapildist ulatub piiri alla, taust ei ulatu piiri alla või taust paigutatakse ainult elemendi sisu kohale (see tähendab, et padding liigutab tausta eemale).

Süntaks

cssselektor {
  background-origin: padding-box | border-box | content-box;
}

Väärtused

Vaikeväärtus: padding-box.

Märkused

Omadus background-origin ei tööta, kui background-attachment omab väärtust fixed. Samuti, kui background-repeat on väärtusega repeat, töötab omadus background-origin alati nagu väärtusel border-box.

Näide . Vaikimisi

Vaikimisi ei ulatu taust piiri alla:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Näide . Väärtus border-box

Nüüd ulatub taust piiri alla:

html<div id="elem"></div>

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Näide . Väärtus content-box

Nüüd nihkub taust padding tõttu eemale:

html<div id="elem"></div>

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Näide . background-repeat: repeat korral

Kui background-repeat on väärtusel repeat, töötab omadus background-origin alati nagu väärtusel border-box, see tähendab, et taust ulatub alati piiri alla:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

Vaata ka