Merhabalar,

Bu yazımda çok popüler olmayan ama kullanışlı olduğunu düşündüğüm Yazıya Arka Plan verme özelliğinden bahsedeceğim. Tasarım gereği veya sizden istenilmesi durumunda bu işlemin oldukça kolay olduğunu siz de anlayacaksınız.

Hemen bir örnek kullanımını tasarlayalım. HTML üzerinde yazı yazacağımız etiketi tanımlayıp içine yazıyı yazalım.

<h1>Yazıya Arka Plan Görseli Verme Örneği</h1>

İşlemin CSS tarafına geçelim. Belirli bir bölgeye arka plan vermek için background-image kullanmamız gerektiğini biliyoruz. Daha sonra url(' ') içine görselin dosya yolunu belirtiyoruz. Aslında yazı içinde background-image kullanacağız.

Onun yanında kullanacağımız diğer background terimi ise background-clip oluyor. Değerini text olarak belirliyoruz. Bu özellikte arka planın metine uygun uyarlanmasını sağlıyor.

Yazıya arka plan verdik ama yazının varsayılan rengini yani color özelliğinin değerini de transparent olarak ayarlamayı unutmayalım. Bu sayede yazı herhangi bir renge sahip olmayıp transparan niteliğinde direkt arka plandan gelen renkleri yansıtacak.

Açıklamalarımı CSS üzerinde kodlamaya dökecek olursam aşağıdaki 3 özellik yazıya arka plan vermenizi kolaylıkla sağlayacaktır.

h1 {
  background-image: url('gorsel.jpg');
  background-clip: text;
  -webkit-background-clip: text; /* Chrome Kullanıcıları İçin */
  color: transparent;
}

İşlemlerimiz bu kadar. h1 etiketi tanımlandı ve arka plan görseli için gerekli özellikler CSS tarafında yazıldı.

Umarım işinize yarar ve anlaşılır bir paylaşım olmuştur. Anlamadığınız durumlarda yorumlar üzerinden soru sorabilir ve yazabilirsiniz.

Mutlu Kodlamalar :)