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

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

Değerler

Varsayılan değer: border-box.

Örnek . border-box Değeri

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

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

css#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:

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

css#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:

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

css#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):

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

css#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