Arka plan klibi - CSS Hileleri

Anonim

background-clip bir arka plan görüntüsünün veya renginin bir öğenin dolgusu veya içeriğinin ötesine ne kadar genişleyeceğini kontrol etmenizi sağlar.

.frame ( background-clip: padding-box; )

Değerler

  • border-boxvarsayılan değerdir. Bu, arka planın, öğenin sınırının dış kenarına kadar uzanmasına izin verir.
  • padding-box arka planı öğenin dolgusunun dış kenarına tutturur ve kenarlığın içine uzanmasına izin vermez.
  • content-boxarka planı içerik kutusunun kenarına kırpar.
  • inheritbackground-clipüst öğenin ayarını seçili öğeye uygular .

Demolar

background-clip en iyi şekilde açıklanır, bu yüzden nasıl çalıştığını göstermek için iki demo hazırladık.

İlk demoda, her div'in içinde bir paragraf vardır. Paragraf, div'in içeriğidir. Her div, sarı bir arka plana ve 5 piksellik, yarı saydam açık mavi kenarlığa sahiptir.

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem arka plan klibine bakın.

Varsayılan olarak veya background-clip: border-boxayarlandığında, sarı arka plan sınırın dış kenarına kadar uzanır. Altındaki sarı arka plan nedeniyle kenarlığın nasıl yeşil gibi göründüğüne dikkat edin.

Olarak background-clipdeğiştirildiğinde padding-box, öğenin dolgusunun bittiği yerde arka plan rengi durur. Arka planın kenarlığa taşmasına izin verilmediğinden kenarlığın mavi olduğuna dikkat edin.

İle background-clip: content-box, arka plan rengi kendisini yalnızca div'in içeriğine, bu durumda tek paragraf öğesine uygular. Div'in dolgusu ve kenarlığının arka plan rengi yoktur. Ancak, bahsetmeye değer küçük bir ayrıntı var: renk, içeriğin kenar boşluğuna kadar uzanıyor. İle birinci ve ikinci örnekler arasındaki farkları kontrol edin content-box.

İlk content-boxörnekte, tarayıcının varsayılan kenar boşlukları paragrafa ve arka plan kliplerine kenar boşluğundan sonra uygulanır. İkinci örnekte, CSS'de kenar boşluğu 0 olarak ayarlanmıştır ve arka plan metnin kenarından kırpılmıştır.

Bu sonraki interaktif, background-clipbir arka plan görüntüsü ile gösterir . Bu demodaki içerik daha küçük bir boş div'dir.

CodePen'de Timothy Miller (@tjacobdesign) tarafından hazırlanan Pen arka plan klibi etkileşimli örneğine bakın.

Bu demo de geçerlidir background-size: coverve background-repeat: no-repeatek olarak background-clipbaşka türlü kırpma kadar tekrar olur arka plan görüntüsü, kontrol etmek.

Metin

Bunun, bir arka planı metne kırpmak için çalışan, satıcı tarafından önekli bir sürümü vardır. Bu çalışmayı görmek için metnin de şeffaf olması gerekecek. Neyse ki, etkili bir şekilde geçersiz colorkılınabilen ve bir geri dönüşe sahip olabileceği için kullanımı güvenli kılan başka bir satıcı önekli metin rengi özelliği vardır :

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome ve Safari bunu destekler.


CodePen'de Chris Coyier (@chriscoyier)
tarafından kaleme alınan Pen Lit metnine bakın .

İlişkili

  • arka plan eki
  • arka plan rengi
  • arka plan görüntüsü
  • arkaplan kökenli
  • arka plan konumu
  • arkaplan tekrar
  • arkaplan boyutu

Daha fazla kaynak

  • background-clip CSS3 spesifikasyonunda
  • MDN'de arka plan klibi
  • CSS Kutu Modeli

Tarayıcı Desteği

Temiz!

Krom Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ İşler