Maske görüntüsü - CSS Hileleri

maskCSS'de A , öğenin uygulandığı kısmı gizler.

.el ( mask-image: url(star.svg); )

Fotoğrafik arka plana sahip bir öğeniz ve maske olarak kullanabileceğiniz siyah beyaz bir SVG grafiğiniz olduğunu varsayalım, örneğin:

Aynı öğe üzerinde görüntüyü background-imageve maskeyi bir olarak ayarlayabilir ve şöyle bir mask-imageşey elde edebilirsiniz:

Maskeler, onları boyutlandırabilmeniz, konumlandırabilmeniz ve aynı arka planlar gibi tekrarlayabilmeniz açısından arka planlarla birçok ortak noktayı paylaşır. Aşağıdaki ilgili özelliklere bakın. Ama işte arka planlarla paylaştıkları maskelerle ilgili bir başka ilginç şey: gradyan olabilirler.

İşte aynı arka plan grafiği, sadece linear-gradientüzerini örten bir maske ile , üst kısmı şeffaf hale getiren alt kısmı hiç şeffaf olmayan şekilde soluyor:

Üst Çünkü işleri linear-gradientolduğunu transparent. Bunun biraz o işe kabul olurdu whitesürece de mask-typeoldu luminance, ama bu benim için herhangi bir tarayıcıda çalışması görünmüyor.

luminanceMaskelerden bahsetmişken , bu benim için JPG.webp veya PNG gibi bir raster formatı olan maskeler olarak resimler için işe yaramıyor gibi görünüyor. Güncelleme : Reader Micheal Hall, uzun el özelliklerinin kullanımıyla bir ilgisi olabileceği bir demo ile yazıyor. Firefox, yalnızca steno kullanırsanız bu kavramı destekliyor gibi görünüyor.

Ancak alfa maskeleri gayet iyi çalışıyor gibi görünüyor. Gerçek alfa şeffaflığı kullanan raster grafiklerde olduğu gibi. Böyle:

Ve sadece bir noktayı kanıtlamak için, maskenin içinden görebileceğiniz bir renkli animasyon:

mask-imageÖzelliği de SVG öğeleri içinde doğrudan kullanılabilir. Bulanık bir filtreye sahip olan bu eliptik maskeye bakın:

Bu SVG maskesini takıp diğer öğelere uygulayabileceğinize benziyor, mask-image: url(#mask);ancak bunun gerçekten işe yaradığını bulamadım. Yalnızca SVG içinde çalışır ve SVG'nin dışında kullanıldığında bir görüntüyü tamamen silmenin kötü bir yan etkisi vardır.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.