background-clip сипаттамасы

background-clip сипаттамасы фондық толтыру не фондық сурет элементке қатысты қалай орналасатынын анықтайды: шекара астында, тек padding ішінде не тек мазмұн үстінде.

Ерекшеліктері

border-box мәні мөлдір шекаралармен қолданылғанда, фон олардың астында көрінеді
text мәні толық қолдау үшін вендорлық префикстерді талап етеді
Сипаттама градиенттермен және көптеген фондармен жұмыс істейді
border-radius болғанда, фон дөңгелектенген бұрыштар бойынша қиылады

Браузерлердің қолдауы

Барлық заманауи браузерлер border-box, padding-box және content-box мәндерін қолдайды. text мәні -webkit- префиксін талап етеді және Chrome, Safari, Edge браузерлерінде қолдау табады.

Синтаксис

селектор {
	background-clip: border-box | padding-box | content-box | text;
}

Мәндері

Мәні	Сипаттамасы
`border-box`	Фон шекараның сыртқы шетіне дейін таралады (шекара астына).
`padding-box`	Фон шекараның ішкі шеті бойынша қиылады (`border` астына кірмейді).
`content-box`	Фон тек мазмүн үстінде көрсетіледі (`padding` қиылады).
`text`	Фон мәтін бойынша қиылады.

Әдепкі мәні: border-box.

Мысал . border-box мәні

Фон жартылай мөлдір шекара астына кіреді:

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

#elem {
	background-clip: border-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

Мысал . padding-box мәні

Фон шекара астына кірмейді:

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

#elem {
	background-clip: padding-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.5);
	padding: 30px;
	width: 250px;
	height: 150px;
}

Мысал . content-box мәні

Фон padding үстіне кірмейді:

<div id="elem">
	мәтін мәтін мәтін мәтін мәтін
	мәтін мәтін мәтін мәтін мәтін
	мәтін мәтін мәтін мәтін мәтін
</div>

#elem {
	background-clip: content-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

Мысал . text мәні

Фон мәтін бойынша қиылады (transparent мәніндегі -webkit-text-fill-color қажет):

<div id="elem">мәтін мәтін мәтін</div>

#elem {
	display: inline-block;
	background: linear-gradient(to right, red, blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	
	font-size: 40px;
	font-weight: bold;
}

Сондай-ақ қараңыз

background сипаттамасы,
фон үшін қысқартылған сипаттама ретінде
background-origin сипаттамасы,
фонның бастапқы орнын анықтайтын