CSS’in güzelliklerinden faydalanarak bir metine renk verebildiğimiz gibi, resim giydirme de kullanabiliriz. Siz de dikkat çekici başlıklar için, dilerseniz resimden oluşan başlıklar, yani resim giydirme / maskeleme kullanabilirsiniz.
Bunun için anlatacağım yöntem: -webkit-background-clip . Bu yöntemde, metnimizi gerçekten metinsel olarak yazıyoruz. Böylece esnek, kolay değiştirilebilir ve dinamik başlıklar elde edebiliyoruz.
<div class="metinResim istanbul">İSTANBUL</div>.metinResim {
color: white; /* Resimin yüklenmeme veya geç yüklenme ihtimaline karşı */
background-position: center center !important;
}
.istanbul {
background: url("/images/istanbul.jpg") no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}-webkit-background-clip: text ve -webkit-text-fill-color: transparent değerleri sayesinde, metnin arka planı maskelenerek, background-image gibi çalışacak bir yordam elde ediyoruz.
Çıktısı:
CSS Maskeleme ve CSS Resim Giydirme
Böylece farklı görsellerle, dikkat çeken başlıklar üretebilirsiniz. Dikkat edilecek 2 konu var sadece. Metin genişliği ve kullanacağınız görselin odak noktası. Bu ikinci konu için de background-position değerini ayarlamanız yeterli. Merkezde, sol-üstte, sağ-altta veya alt-ortada… Nasıl uygun görürseniz.
CSS Resim Giydirme’ye Birkaç Örnek Link
Bu teknik tabii ki Internet Explorer’da çalışmıyor. Farklı alanlarda da kullanırsanız yorumlarda benimle de paylaşabilirsiniz.
Sevgiler.
İleti okuma için: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
Tarayıcı desteğine bakmak için: https://caniuse.com/?search=text-fill-color