Vlastnosť background-origin

Vlastnosť background-origin určuje, ako sa bude obrázok pozadia (konkrétne obrázok, nie výplň) umiestňovať vzhľadom na prvok: časť obrázka pozadia bude prenikať pod okraj, pozadie nebude prenikať pod okraj alebo pozadie bude umiestnené len nad obsahom prvku (to znamená, že padding odtlačí pozadie).

Syntax

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

Hodnoty

Predvolená hodnota: padding-box.

Poznámky

Vlastnosť background-origin nefunguje, keď background-attachment má hodnotu fixed. Tiež pri background-repeat s hodnotou repeat vlastnosť background-origin vždy funguje ako pri hodnote border-box.

Príklad . Predvolené

Predvolene pozadie nebude prenikať pod okraj:

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

Результат:

Príklad . Hodnota border-box

Teraz pozadie prenikne pod okraj:

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

Результат:

Príklad . Hodnota content-box

A teraz sa pozadie odsune cez 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;
}

Результат:

Príklad . Pri background-repeat: repeat

Pri background-repeat s hodnotou repeat vlastnosť background-origin vždy funguje, ako pri hodnote border-box, to znamená, že pozadie vždy preniká pod okraj:

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

Результат:

Pozrite tiež