Proprietatea background-clip

Proprietatea background-clip determină cum umplerea de fundal sau imaginea de fundal va fi plasată în raport cu elementul: sub bordură, doar în interiorul padding sau doar deasupra conținutului.

Particularități

La utilizarea border-box cu borduri transparente, fundalul va fi vizibil sub acestea
Valoarea text necesită prefixe vendor pentru suport complet
Proprietatea funcționează cu gradientele și cu fundalurile multiple
La border-radius fundalul este decupat în funcție de colțurile rotunjite

Suport browser

Toate browserele moderne suportă border-box, padding-box și content-box. Valoarea text necesită prefixul -webkit- și este suportată în Chrome, Safari, Edge.

Sintaxă

selector {
	background-clip: border-box | padding-box | content-box | text;
}

Valori

Valoare	Descriere
`border-box`	Fundalul se extinde până la marginea exterioară a bordurii (sub bordură).
`padding-box`	Fundalul este decupat la marginea interioară a bordurii (nu pătrunde sub `border`).
`content-box`	Fundalul este afișat doar deasupra conținutului (este decupat de `padding`).
`text`	Fundalul este decupat în funcție de text.

Valoarea implicită: border-box.

Exemplu . Valoarea border-box

Fundalul pătrunde sub bordura semitransparentă:

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

Exemplu .Valoarea padding-box

Fundalul nu pătrunde sub bordură:

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

Exemplu . Valoarea content-box

Fundalul nu pătrunde pe padding:

<div id="elem">
	text text text text text
	text text text text text
	text text text text text
</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;
}

Exemplu . Valoarea text

Fundalul este decupat în funcție de text (este necesar -webkit-text-fill-color cu valoarea transparent):

<div id="elem">text text text</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;
}

Vezi și

proprietatea background,
reprezentând o proprietate-scurtătură pentru fundal
proprietatea background-origin,
determinând poziția inițială a fundalului