# 185: CSS Maskeleriyle Oynamak - CSS Hileleri

Anonim

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 maskonun ve mask-*özellikleri gerçekten benzerdir backgroundve 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. alphaResmin saydam parçaları (umut daha kafa karıştıran bazen daha olan) maskenin şeffaf parçaları haline bu değer anlamına gelir. Bir luminancedeğ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.