Atributo mask de CSS

Página anterior marker-start
Página siguiente mask-clip

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)"