Egenskaben background-origin

Egenskaben background-origin angiver hvordan baggrundsbilledet (specifikt billedet, ikke udfyldningen) vil blive placeret i forhold til elementet: en del af baggrundsbilledet vil trænge ind under kanten, baggrunden vil ikke trænge ind under kanten eller baggrunden vil kun blive placeret over indholdet af elementet (det vil sige padding vil skubbe baggrunden væk).

Syntaks

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

Værdier

Standardværdi: padding-box.

Bemærkninger

Egenskaben background-origin virker ikke, når background-attachment har værdien fixed. Også når background-repeat er sat til værdien repeat, virker egenskaben background-origin altid som med værdien border-box.

Eksempel . Standard

Som standard vil baggrunden ikke trænge ind under kanten:

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

Результат:

Eksempel . Værdien border-box

Nu vil baggrunden trænge ind under kanten:

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

Результат:

Eksempel . Værdien content-box

Og nu vil baggrunden blive skubbet væk via padding:

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

Результат:

Eksempel . Med background-repeat: repeat

Med background-repeat sat til værdien repeat virker egenskaben background-origin altid, som med værdien border-box, det vil sige baggrunden trænger altid ind under kanten:

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

Результат:

Se også