Maske modu - CSS Hileleri | CSS Almanak 2024

mask-modeCSS özelliği CSS maske katmanı resim, alfa maskesi veya parlaklık maskesi olarak kabul olup olmadığını gösterir.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Sözdizimi

mask-mode: alpha | luminance | match-source

Özelliği, bir anahtar değeri, ya da bu ikisinin bir virgülle ayrılmış listesini ya da her üç kabul alpha, luminanceve mask-sourcedeğerleri.

Başlangıç değeri: match-source
Şunlar için geçerlidir: tüm öğeler. SVG'de, tüm grafik öğeleri hariç olmak üzere kap öğeleri için geçerlidir.
Devralındı: hayır
Hesaplanan değer: belirtildiği gibi
Animasyon türü: ayrık

Değerler

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: maske katmanı görüntüsünün alfa değerlerinin (alfa kanalı) maske değerleri olarak kullanılması gerektiğini belirtir.
luminance: maske görüntüsünün parlaklık değerlerinin maske değerleri olarak kullanılması gerektiğini belirtir.
match-source:mask-image özelliğin maske referansı bir resim URL'si veya gradyan gibi bir CSS öğesi ise maske modunu alfa olarak ayarlayan varsayılan değer . Ancak, mask-imageözelliğin maske referansı bir SVG öğesi ise, başvurulan öğenin maske türü özelliği tarafından belirtilen değer kullanılmalıdır.
initial: özelliğin varsayılan ayarı olan match-source.
inherit: ebeveynin maske modu değerini benimser.
unset: geçerli maske modunu öğeden kaldırır.

Birden çok değer kullanma

Bu özellik, maske modları için virgülle ayrılmış bir değerler listesi alabilir ve her değer, maske görüntüsü özelliğinde belirtilen karşılık gelen bir maske katmanı görüntüsüne uygulanır.

Aşağıdaki örnekte, birinci değer, ilk görüntüye karşılık gelen maske modunu, ikinci görüntü için ikinci değeri vb. Belirtir.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Alfa ve parlaklık maskeleri

CSS'de maskeleme, maske değerlerini hesaplamada bazı farklılıkları olan iki yöntemle birlikte gelir.

Alfa maskeleri

Görüntüler piksellerden yapılmıştır, her pikselde renk değerleri içeren bazı veriler ve saydamlık bilgisine sahip alfa değerleri olabilir. Alfa kanalına sahip bir görüntü, siyah ve şeffaf alanlara sahip PNG görüntüleri gibi bir alfa maskesi olabilir .

Basit bir maskeleme işleminde, bir elemanımız ve bunun üzerine yerleştirilmiş bir maske resmimiz var. Maske görüntüsündeki her pikselin alfa değeri, öğedeki karşılık gelen piksel ile birleştirilecektir.

Alfa değeri sıfır ise (yani şeffafsa), kazanır ve öğenin o kısmı maskelenir (yani gizlenir).
Bir alfa değeri (yani tamamen opak), öğenin pikselinin görünür olmasına izin verir.
0 ile 1 arasındaki bir değer (ör. 0,5), pikselin belirli bir şeffaflık düzeyinde görünür olmasına izin verir.

Dolayısıyla, bu yöntemde, belirli bir noktadaki maske değeri, maske görüntüsünün o noktasındaki alfa kanalının değeridir ve renk kanalları, maske değerine katkıda bulunmaz.

Aşağıdaki örnek, yalnızca siyah (alfa değeri 1) ve saydam alanlar (0'ın alfa değeri) içeren bir alfa maskesidir ve bazı kısımları tamamen görünür ve diğerleri tamamen şeffaf olan sonucu görebilirsiniz:

Maske görüntüsü olarak alfa kanallı bir PNG kullanma

Ancak aşağıdaki örnekte, farklı şeffaflık düzeyine sahip bir gradyan kullanıyoruz. Sonuç yalnızca görünür veya şeffaf değil, aynı zamanda bazı yarı saydam alanlar da var:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Ve sonuç tarayıcıda şöyle görünüyor:

Doğrusal degradeyi maske görüntüsü olarak kullanma

Parlaklık maskeleri

Bir parlaklık maskesinde renkler ve alfa değerleri önemlidir. Alfa değeri 0 olduğunda (yani tamamen şeffaf), öğe gizlidir; Alfa değeri 1 olduğunda, maske değerleri o pikselin renk kanalına bağlı olarak değişir. Örneğin, renk beyaz olduğunda öğe görülebilir; siyah alan olması durumunda öğe gizlidir.

Bir alfa maskesindeki maske değerlerinin hesaplanması yalnızca maske görüntüsünün alfa değerlerine dayandırılırken, bir parlaklık maskesinin maske değerleri parlaklık ve alfa değerlerinden hesaplanır. Tarayıcılar bunu aşağıdaki adımlarda yapar:

Renk kanalı değerlerinden bir parlaklık değeri hesaplayın.
Maske değerini oluşturmak için hesaplanan parlaklık değerini ilgili alfa değeriyle çarpın.

/ açıklama Bu hesaplamalar hakkında daha fazla bilgi için Eylül 2019 Editör Taslağından CSS Maskeleme Modülü 1 spesifikasyonundaki maske işleme bölümüne göz atabilirsiniz.

Körük, ortasında beyaz bir güneş ve çevresinde şeffaf alanlar bulunan bir maske görüntüsüdür. Gördüğünüz gibi, while alanları tamamen görülebilir:

Alfa kanalı ve beyaz alanları olan bir PNG görüntüsünü maske görüntüsü olarak kullanma

Bir sonraki örnekte, maske görüntüsü olarak renkli bir gradyan kullanılıyor ve parlaklık modunda farklı renklerin maske değerleri üzerindeki etkisini görebilirsiniz: