istanbul css maskeleme

CSS Maskeleme ile Metinlere Resim Giydirme

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 Resim Giydirme

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

ates
deniz
hava
orman 1
toprak

 

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