El enmascaramiento en CSS es una forma de ocultar partes del elemento y mostrar otras. Otro es clip-path, pero no nos enfoquemos en eso hoy. “Las máscaras son imágenes; Los clips son caminos ”es una forma de pensar en la diferencia, aunque ciertamente se vuelve confusa.
En este video, veremos qué tan similares masky sus mask-*propiedades son realmente similares a las propiedades backgroundy background-*. Y se pueden usar juntos muy bien, ya que una máscara es una forma de ocultar algunas partes de una imagen pero aún así revelar el contenido y el fondo de las otras partes.
SVG es ideal para máscaras, ya que la naturaleza vectorial les permite escalar bien y el tamaño de archivo generalmente pequeño es bueno. Uno de los aspectos confusos de las máscaras es el mask-type. El alphavalor significa que las partes transparentes de la imagen se convierten en las partes transparentes de la máscara (que a veces es más alucinante de lo que esperas). Un luminancevalor significa que el blanco es opaco y el negro es transparente y el gris está en el medio. ¿O es al revés? ¿Y las máscaras que ya tienen un canal alfa? ¿Y las áreas de un archivo SVG sin nada en ellas se consideran transparentes alfa? ¿Probablemente? Vamos a jugar.