Atributo mask de CSS

Definición y uso

mask La propiedad se utiliza para ocultar elementos a través de máscaras o recortes de imágenes (parcial o completo).

mask La propiedad es una abreviatura de las siguientes propiedades:

Ejemplo

Ejemplo 1

Se crea una máscara de superposición para la imagen:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Prueba personalmente

Ejemplo 2

Se crean diferentes capas de superposición para la imagen utilizando gradiente lineal y radial:

.mask1 {
  mask: gradiente lineal(negro, transparente);
}
.mask2 {
  mask: gradiente radial(circle, negro 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: gradiente radial(ellipse, negro 50%, rgba(0, 0, 0, 0.5) 50%);
}

Prueba personalmente

Ejemplo 3

Se crea una máscara de superposición para la imagen utilizando el elemento <mask> de SVG:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Prueba personalmente

Ejemplo 4

Se crea una máscara de superposición para la imagen utilizando el elemento <mask> de SVG:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Prueba personalmente

Sintaxis de CSS

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Valor del atributo

Valor Descripción
mask-image Especifica la imagen utilizada como capa de máscara del elemento. El valor predeterminado es none.
mask-mode

Especifica si la imagen de la capa de máscara debe considerarse como una máscara de brillo o una máscara alpha.

El valor predeterminado es match-source.

mask-repeat

Establece si/ cómo se repite la imagen de máscara.

El valor predeterminado es repeat.

mask-position

Establece la posición de inicio de la imagen de máscara (relativa al área de posición de máscara).

El valor predeterminado es 0% 0%.

mask-clip

Especifica el área afectada por la imagen de máscara.

El valor predeterminado es border-box.

mask-origin

Especifica la posición de inicio de la imagen de la capa de máscara (área de posición de máscara).

El valor predeterminado es border-box.

mask-size

Especifica el tamaño de la imagen de la capa de máscara.

El valor predeterminado es auto.

mask-composite

Especifica la operación de composición utilizada entre la capa de máscara actual y la capa de máscara inferior.

El valor predeterminado es add.

initial Establece este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: none match-source repeat 0% 0% border-box border-box auto add
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de Masking de CSS Nivel 1
Sintaxis de JavaScript: object.style.mask="url(star.svg)"

Compatibilidad del navegador

Las cifras en la tabla representan la versión del navegador que admite completamente la propiedad por primera vez.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Páginas relacionadas

Tutoriales:CSS Ombra

Referencia:Atributo mask de CSS

Referencia:Atributo mask-clip de CSS

Referencia:Atributo mask-composite de CSS

Referencia:Atributo mask-image de CSS

Referencia:Atributo mask-mode de CSS

Referencia:Atributo mask-origin de CSS

Referencia:Atributo mask-position de CSS

Referencia:Atributo mask-repeat de CSS

Referencia:Atributo mask-size de CSS

Referencia:Atributo mask-type de CSS