Atributo mask-image de CSS

Página anterior mask-composite
Página siguiente mask-mode

Definición y uso

mask-image La propiedad se utiliza para especificar la imagen que se utiliza como máscara del elemento.

Consejo:Las transiciones lineales y radiales en CSS también se pueden usar como imágenes de máscara.

Ejemplo

Ejemplo 1

Crear una máscara para la imagen:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Pruebe usted mismo

Ejemplo 2

Se utiliza una transición lineal y radial para crear diferentes capas de máscara para la imagen:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

Pruebe usted mismo

Ejemplo 3

Cree una capa de máscara para la imagen utilizando el elemento SVG <mask>:

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

Pruebe usted mismo

Ejemplo 4

Cree otra capa de máscara para la imagen utilizando el elemento SVG <mask>:

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

Pruebe usted mismo

Sintaxis de CSS

mask-image: none|image|url()|initial|inherit;

Valor del atributo

Valor	Descripción
none	Valor predeterminado. No se utiliza imagen de máscara.
image	Se utiliza como imagen de máscara.
url()	Referencia de URL para el elemento de imagen o SVG <mask>.
initial	Establezca este atributo en su valor predeterminado. Consulte initial.
inherit	Hereda este atributo del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado:	none
Herencia:	No
Producción de animación:	No se admite. Consulte:Atributos relacionados con la animación.
Versión:	Módulo de Máscara CSS Nivel 1
Sintaxis de JavaScript:	object.style.maskImage="url(star.svg)"