Mascarar em CSS é uma forma de ocultar partes do elemento e mostrar outras. Outra é clip-path, mas não vamos nos concentrar nisso hoje. “As máscaras são imagens; Clipes são caminhos ”é uma forma de pensar sobre a diferença, embora certamente fique confusa.
Neste vídeo, veremos como maske suas mask-*propriedades são realmente semelhantes às propriedades backgrounde background-*. E eles podem ser usados juntos muito bem, já que uma máscara é uma maneira de ocultar algumas partes de uma imagem, mas ainda revelar o conteúdo e o plano de fundo de outras partes.
O SVG é ótimo para máscaras, já que a natureza do vetor permite um bom escalonamento e o tamanho do arquivo geralmente pequeno é bom. Uma das partes confusas em torno das máscaras é o mask-type. O alphavalor significa que as partes transparentes da imagem se tornam as partes transparentes da máscara (que às vezes é mais alucinante do que você espera). Um luminancevalor significa que o branco é opaco e o preto é transparente e o cinza é o meio. Ou é o contrário? E as máscaras que já possuem um canal alfa? E as áreas em um arquivo SVG sem nada nelas são consideradas transparentes para alfa? Provavelmente? Vamos jogar.