Savybė background-origin

Savybė background-origin nustato, kaip fono paveikslėlis (būtent paveikslėlis, ne užpildas) bus išdėstomas elemento atžvilgiu: dalis fono paveikslėlio užlips po sienele, fonas neprilis po sienele arba fonas bus išdėstomas tik virš elemento turinio (tai yra padding atstumia foną).

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`border-box`	Fono paveikslėlis užlips po sienele.
`padding-box`	Fono paveikslėlis neprilis po sienele.
`content-box`	Fono paveikslėlis bus tik virš turinio.

Numatytoji reikšmė: padding-box.

Pastabos

Savybė background-origin neveikia, kai background-attachment turi reikšmę fixed. Taip pat, kai background-repeat turi reikšmę repeat, savybė background-origin visada veikia kaip su reikšme border-box.

Pavyzdys . Pagal nutylėjimą

Pagal nutylėjimą fonas neprilis po sienele:

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

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

Pavyzdys . Reikšmė border-box

Dabar fonas užlips po sienele:

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Pavyzdys . Reikšmė content-box

O dabar fonas bus atstumtas per 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;
}

Pavyzdys . Kai background-repeat: repeat

Kai background-repeat turi reikšmę repeat, savybė background-origin visada veikia, kaip su reikšme border-box, tai yra fonas visada užlips po sienele:

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

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

Taip pat žiūrėkite

savybė background-clip,
kuri nustato ir fono paveikslėlio, ir užpildo poziciją
savybė background,
kuri yra trumpinys fonui nustatyti