Lastnost background-origin

Lastnost background-origin določa, kako bo slika ozadja (prav slika, ne barvno polnilo) nameščena glede na element: del slike ozadja se bo raztezal pod mejo, ozadje se ne bo raztezalo pod mejo ali bo ozadje nameščeno samo nad vsebino elementa (to pomeni, da bo padding odrinil ozadje).

Sintaksa

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

Vrednosti

Privzeta vrednost: padding-box.

Opombe

Lastnost background-origin ne deluje, ko ima background-attachment vrednost fixed. Prav tako pri background-repeat z vrednostjo repeat lastnost background-origin vedno deluje kot pri vrednosti border-box.

Primer . Privzeto

Privzeto se ozadje ne bo raztezalo pod mejo:

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

Результат:

Primer . Vrednost border-box

Zdaj se bo ozadje raztezalo pod mejo:

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

Результат:

Primer . Vrednost content-box

Zdaj se bo ozadje odmaknilo zaradi 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;
}

Результат:

Primer . Pri background-repeat: repeat

Pri background-repeat z vrednostjo repeat lastnost background-origin vedno deluje, kot pri vrednosti border-box, kar pomeni, da se ozadje vedno razteza pod mejo:

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

Результат:

Glejte tudi