CSS'de maskeleme, öğenin parçalarını gizlemenin ve diğerlerini göstermenin bir yoludur. Bir diğeri clip-path
, ama bugün buna odaklanmayalım. “Maskeler imajlardır; Klipler yollardır ”, kesinlikle kafa karıştırıcı olsa da, farkı düşünmenin bir yoludur.
Bu videoda, ne kadar benzer bakacağız mask
onun ve mask-*
özellikleri gerçekten benzerdir background
ve background-*
özellikleri. Ve birlikte güzelce kullanılabilirler, çünkü bir maske görüntünün bazı kısımlarını gizlemenin ama yine de diğer kısımların içeriğini ve arka planını göstermenin bir yoludur.
SVG, maskeler için mükemmeldir, çünkü vektör yapısı güzel bir şekilde ölçeklenmelerine izin verir ve genellikle küçük dosya boyutu iyidir. Maskelerin etrafındaki kafa karıştırıcı kısımlardan biri mask-type
. alpha
Resmin saydam parçaları (umut daha kafa karıştıran bazen daha olan) maskenin şeffaf parçaları haline bu değer anlamına gelir. Bir luminance
değer aracı beyaz opak ve siyah şeffaf ve gri arasındadır. Yoksa tam tersi mi? Zaten bir alfa kanalı olan maskeler ne olacak? Ve SVG dosyasındaki hiçbir şeyin olmadığı alanlar alfa saydam olarak kabul edilir mi? Muhtemelen? Hadi bir oyun oynayalım.