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

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

Thamani

Thamani	Maelezo
`border-box`	Picha ya usuli itaingia chini ya mpaka.
`padding-box`	Picha ya usuli haitaingia chini ya mpaka.
`content-box`	Picha ya usuli itakuwa tu juu ya yaliyomo.

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:

<div id="elem"></div>

#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:

<div id="elem"></div>

#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:

<div id="elem"></div>

#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:

<div id="elem"></div>

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Angalia pia

sifa background-clip,
inayobainisha nafasi ya picha ya usuli na kujazwa rangi
sifa background,
inayowakilisha sifa iliyofupishwa kwa usuli