Resmin CSS3 ile harmanlanması modu

Görüntü arka Büyük ekran metinlerin arkasında harika görünüyorsun. Bununla birlikte, CSS uygulaması bu kadar basit değildir. Kullanabiliriz background-clip: metin; Ancak, hala yeterli tarayıcı desteği olmayan deneysel bir özellik.

Bir metnin arkasında resim arka planı göstermek için CSS alternatifi kullanmak mix-harman modlu özellik. HTML elemanları için karışım modları Internet Explorer gibi birkaç istisna dışında tüm modern masaüstü ve mobil tarayıcılarda oldukça desteklenir..

Bu yazıda nasıl olduğunu göreceğiz mix-harman modlu (özellikle modlarından ikisi) çalışır ve bunları nasıl kullanabileceğinizi görüntü arka planı olan bir metni görüntüle iki kullanım durumunda:

1. arka plan resmi ne zaman görülebilir metin yoluyla
2. arka plan resmi ne zaman çevrede koşmak Metin

Aşağıdaki demoda bazı örneklere bakın (resimler unsplash.com'dan).

mix-harman modlu CSS özelliği, nasıl içerik ve zemin HTML öğesinin açıklaması birlikte renkli olarak karıştır.

Kullanacağımız karışım modlarının listesine bir göz atın çarpmak ve ekran bu yayında.

İlk önce, bu iki özel karışım modunun nasıl çalıştığını inceleyelim.

Nasıl çarpmak & ekran karışım modları çalışması

Harmanlama modları teknik olarak son renk değerini hesapla Bir elementin ve fonunun renk bileşenlerini kullanma.

çarpmak harmanlama modu

İçinde çarpmak Karışım modu, öğelerin bireysel renkleri ve arka planları çarpılır, ve sonuçtaki renk nihai harmanlanmış sürüme uygulanır.

çarpmak karışım modu aşağıdaki formüle göre hesaplanır:

B (Cb, Cs) = Cb × Cs

nerede:Cb - Zemin rengi bileşenics - Kaynak elemanın renk bileşeniB - Karıştırma fonksiyonu

Ne zaman Cb ve cs çarpılır, elde edilen renk bu iki renk bileşeninin bir karışımıdır ve iki rengin en karanlık kadar karanlık.

Metin resmi arka planımızı oluşturmak için, ne zaman olaya odaklanmamız gerekir. cs (kaynak elemanın renk bileşeni) ya siyah ya da beyaz.

Eğer cs olduğu siyah değeri 0, çıktı rengi de siyah olacaktır, çünkü Cb × 0 = 0. Öyleyse, öğe siyah renklendiğinde zeminin ne renk olduğu önemli değil, harmanladıktan sonra tek görebildiğimiz siyah.

Eğer cs olduğu beyaz değeri 1, çıktı rengi ne olursa olsun Cb ÇünküCb × 1 = Cb. Yani bu durumda doğrudan zemini görüyoruz olduğu gibi.

ekran harmanlama modu

ekran karışım modu çarpmak harmanlama modu ters sonuç. Yani, bir siyah ön plan fonu gösterir olduğu gibi, ve bir beyaz ön plan beyaz gösterir ne olursa olsun.

Formülünü hızla görelim:

B (Cb, Cs) = Cb + Cs - (Cb × Cs)

Ne zaman cs olduğu siyah (0), zemin rengi, harmanlamadan sonra, şu şekilde gösterilir:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Ne zaman cs olduğu beyaz (1) Sonuç olarak, herhangi bir fon ile beyaz olacaktır:

Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1

1. Metinde gösterilen resim

Arka plan resmini gösteren metni görüntülemek için, ekran harmanlama modu ile siyah metin ve beyaz çevre.

 
 
Su
 
 

 .zemin genişlik: 600 piksel; yükseklik: 210px; background-image: url (someimage.jpg); arkaplan büyüklüğü: 100%; marj: otomatik;  .text color: black; arka plan rengi: beyaz; karışım-harmanlama modu: ekran; genişlik:% 100; yükseklik:% 100; yazı tipi boyutu: 160pt; yazı tipi ağırlığı: bolder; metin hizalama: orta; çizgi yüksekliği: 210px; marj: 0;  

Şu anda metnimiz aşağıdakine benziyor, bir sonraki adımda arka plana özel renk katacağız.

Renk ekleme

Şimdiye dek tahmin edebileceğiniz gibi, harmanlama modlarını kullanmak bize metni çevreleyen alan için yalnızca iki renk seçeneği bıraktı - siyah ya da beyaz. ancak beyazla, ona biraz renk eklemek mümkündür kaplama kullanmak, eğer kaplama rengi kullanılan görüntü ile güzel eşleşir.

Çevreleyen bölgeye renk eklemek için

HTML’ye bindirme için, ve ona bir yüksek şeffaflığa sahip arka plan rengi. Ayrıca karışım-harmanlama modu: çarpma bindirmenin artalan renginin biraz daha iyi karıştır metnin içinde görünen resim.

 
 
Su
 
 
 

 .yer paylaşımı background-color: rgba (0,255,255, .1); karışım-harmanlama modu: çarpma; genişlik:% 100; yükseklik:% 100; pozisyon: mutlak; üst: 0;  

Bu teknikle metnin etrafındaki alanı görüntü arka planı ile renklendirebiliriz:

Tekniğin sadece iyi çalıştığını unutmayın hafif şeffaf renkler. Tamamıyla opak bir renk veya görüntüyle eşleşmeyen bir renk kullanırsanız, metnin içinde görünen görüntü kullanılan rengin çok görünür bir tonuna sahip olacaktır;, opak renkleri önlemek.

2. Resmin arka planıyla çevrili metin

Normal bir metin görüntünün arka planına yerleştirilmesine rağmen aynı tekniği gerektirir, Yukarıdaki demonun ne zaman nasıl göründüğüne dair bir örnek göstereceğim. etkisi tersine döndü, yani, metin rengi beyaz ve arka plan siyah olduğunda.

 .metin renk: beyaz; arkaplan rengi: siyah; karışım-harmanlama modu: ekran; genişlik:% 100; yükseklik:% 100; yazı tipi boyutu: 160pt; yazı tipi ağırlığı: bolder; metin hizalama: orta; çizgi yüksekliği: 210px; marj: 0;  

Kullanabilirsiniz aynı kaplama metne biraz renk eklemek için, beyaz olarak tutmak istemediğiniz sürece.

 .yer paylaşımı background-color: rgba (0,255,255, .1); karışım-harmanlama modu: çarpma; genişlik:% 100; yükseklik:% 100; pozisyon: mutlak; üst: 0;  

Aşağıda, tam tersi durumun nasıl göründüğünü görebilirsiniz:

Internet Explorer’da veya desteklemeyen başka bir tarayıcıda mix-harman modlu özelliği, görüntü arka planı görünmez ve metin siyah (veya beyaz) kalır.