background-clip Özelliği

background-clip özelliği, bir arka plan dolgusunun veya arka plan görselinin öğeye göre nasıl yerleştirileceğini belirler: kenarlığın altında, sadece padding içinde veya sadece içeriğin üzerinde.

Özellikler

border-box şeffaf kenarlıklarla kullanıldığında, arka plan onların altında görünecektir
text değeri tam destek için vendor önekleri gerektirir
Özellik, gradientler ve çoklu arka planlarla çalışır
border-radius uygulandığında, arka plan yuvarlatılmış köşelere göre kırpılır

Tarayıcı Desteği

Tüm modern tarayıcılar border-box, padding-box ve content-box değerlerini destekler. text değeri -webkit- öneki gerektirir ve Chrome, Safari, Edge'de desteklenir.

Sözdizimi

seçici {
	background-clip: border-box | padding-box | content-box | text;
}

Değerler

Değer	Açıklama
`border-box`	Arka plan, kenarlığın dış kenarına kadar uzanır (kenarlığın altına).
`padding-box`	Arka plan, kenarlığın iç kenarından kırpılır (`border` altına girmez).
`content-box`	Arka plan sadece içeriğin üzerinde görüntülenir (`padding` kırpılır).
`text`	Arka plan metne göre kırpılır.

Varsayılan değer: border-box.

Örnek . border-box Değeri

Arka plan yarı şeffaf kenarlığın altına girer:

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

Örnek . padding-box Değeri

Arka plan kenarlığın altına girmez:

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

Örnek . content-box Değeri

Arka plan padding üzerine gelmez:

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

Örnek . text Değeri

Arka plan metne göre kırpılır (transparent değerinde -webkit-text-fill-color gerektirir):

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

Ayrıca Bakınız

background özelliği,
arka plan için kısayol özelliğidir
background-origin özelliği,
arka planın başlangıç konumunu belirler