A background-origin tulajdonság

A background-origin tulajdonság határozza meg, hogy a háttérkép (kifejezetten a kép, nem a kitöltés) hogyan helyezkedik el az elemhez viszonyítva: a háttérkép egy része a szegély alá nyúlhat, a háttér nem nyúlhat a szegély alá, vagy a háttér csak az elem tartalma fölé helyezkedik el (azaz a padding el fogja tolni a hátteret).

Szintaxis

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

Értékek

Alapértelmezett érték: padding-box.

Megjegyzések

A background-origin tulajdonság nem működik, amikor a background-attachment értéke fixed. Továbbá, ha a background-repeat értéke repeat, a background-origin tulajdonság mindig úgy viselkedik, mintha az értéke border-box lenne.

Példa . Alapértelmezés szerint

Alapértelmezés szerint a háttér nem nyúlik a szegély alá:

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;
}

Результат:

Példa . Border-box érték

Most a háttér a szegély alá nyúlik:

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;
}

Результат:

Példa . Content-box érték

Most pedig a háttér a padding miatt eltolódik:

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;
}

Результат:

Példa . Background-repeat: repeat esetén

Ha a background-repeat értéke repeat, a background-origin tulajdonság mindig úgy működik, mintha az értéke border-box lenne, azaz a háttér mindig a szegély alá nyúlik:

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;
}

Результат:

Lásd még