Máscara-imagen - Trucos CSS | Almanaque CSS 2024

A masken CSS oculta parte del elemento al que se aplica.

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

Supongamos que tiene un elemento con un fondo fotográfico y un gráfico SVG en blanco y negro para usar como máscara, como este:

Puede establecer la imagen como a background-imagey la máscara como a mask-imageen el mismo elemento y obtener algo como esto:

Las máscaras tienen mucho en común con los fondos, ya que puede cambiar su tamaño, posicionarlas y repetirlas, como fondos. Consulte las propiedades relacionadas a continuación. Pero hay otra cosa interesante sobre las máscaras que comparten con los fondos: pueden ser degradados.

Aquí está el mismo gráfico de fondo, solo con una linear-gradientmáscara que lo cubre, lo que hace que la parte superior sea transparente y la parte inferior no es transparente en absoluto:

Eso funciona porque la parte superior del linear-gradientes transparent. Habría asumido que funcionaría si fuera whitetan bien como lo mask-typefue luminance, pero eso no parece funcionar en ningún navegador para mí.

Hablando de luminancemáscaras, eso no parece funcionar para imágenes como máscaras que son un formato de trama como JPG.webp o PNG para mí. Actualización : el lector Micheal Hall escribe con una demostración en la que podría tener algo que ver con el uso de las propiedades de mano larga. Firefox parece admitir este concepto si solo usa la abreviatura.

Pero las máscaras alfa parecen funcionar bien. Como en los gráficos de trama que utilizan transparencia alfa real. Como esto:

Y solo para demostrar un punto, una animación de color que puede ver a través de la máscara:

La mask-imagepropiedad también se puede utilizar directamente dentro de los elementos SVG. Mira esta máscara elíptica que también tiene un filtro borroso:

Parece que podrías enganchar esa máscara SVG y aplicarla a otros elementos, mask-image: url(#mask);pero no creo que eso realmente funcione. Solo funciona dentro de SVG y tiene el desagradable efecto secundario de borrar por completo una imagen si se usa fuera de SVG.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.