Sifa background-origin

Sifa background-origin inabainisha jinsi picha ya usuli (picha yenyewe, sio kujazwa rangi) itawekwa kuhusiana na kipengele: sehemu ya picha ya usuli itaingia chini ya mpaka, usuli hautakiingia chini ya mpaka au usuli utawekwa tu juu ya yaliyomo ya kipengele (yaani padding itasukuma usuli).

Syntax

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

Thamani

Thamani chaguomsingi: padding-box.

Uzingatio

Sifa background-origin haifanyi kazi, wakati background-attachment ina thamani fixed. Pia kwa background-repeat katika thamani repeat sifa background-origin hufanya kazi kila wakati, kama kwa thamani border-box.

Mfano . Chaguomsingi

Kwa chaguomsingi usuli hautakiingia chini ya mpaka:

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

Результат:

Mfano . Thamani border-box

Sasa usuli utaingia chini ya mpaka:

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

Результат:

Mfano . Thamani content-box

Sasa usuli utasukumwa kupitia 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;
}

Результат:

Mfano . Kwa background-repeat: repeat

Kwa background-repeat katika thamani repeat sifa background-origin hufanya kazi kila wakati, kama kwa thamani border-box, yaani usuli huingia chini ya mpaka kila wakati:

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

Результат:

Angalia pia