A background-clip tulajdonság

A background-clip tulajdonság meghatározza, hogy a háttérszín vagy a háttérkép hogyan helyezkedik el az elemhez képest: a szegély alatt, csak a padding területén belül, vagy csak a tartalom felett.

Jellemzők

Ha border-box-ot használunk átlátszó szegélyekkel, a háttér látható lesz alattuk
A text érték vendor prefixeket igényel a teljes támadottsághoz
A tulajdonság gradientekkel és többszörös hátterekkel is működik
border-radius esetén a háttér a lekerekített sarkok mentén vágódik le

Böngésző támogatottság

Minden modern böngésző támogatja a border-box, padding-box és content-box értékeket. A text értékhez -webkit- prefix szükséges, és a Chrome, Safari, Edge böngészőkben támogatott.

Szintaxis

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

Értékek

Érték	Leírás
`border-box`	A háttér a szegély külső széléig terjed (a szegély alá).
`padding-box`	A háttér a szegély belső széléénél van levágva (nem nyúlik a `border` alá).
`content-box`	A háttér csak a tartalom felett jelenik meg (a `padding` levágja).
`text`	A háttér a szöveg mentén van levágva.

Alapértelmezett érték: border-box.

Példa . border-box érték

A háttér az áttetsző szegély alá nyúlik:

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

Példa . padding-box érték

A háttér nem nyúlik a szegély alá:

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

Példa . content-box érték

A háttér nem nyúlik a padding területére:

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

Példa . text érték

A háttér a szöveg mentén van levágva (-webkit-text-fill-color transparent értékre állítása szükséges):

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

Lásd még

a background tulajdonság,
amely egy rövidítő tulajdonság a háttérhez
a background-origin tulajdonság,
amely a háttér kiindulási pozícióját határozza meg