mask-origin

Índice

Definición de .mask-origin en CSS

El .mask-origin especifica el área de posición de la máscara de una imagen de capa de máscara. En otras palabras, define dónde está el origen de la imagen de la capa de máscara, ya sea el borde del borde, el relleno o el cuadro de contenido.

Caso de uso : propiedad CSS mask-origin

Esta propiedad de CSS se emplea de la siguiente manera:

.element {
  mask-image: url(star.svg);
  mask-origin: content-box;
}

Otro ejemplo más avanzado de .mask-origin es el siguiente de CODEPEN:

Sintaxis de .mask-origin en CSS

  mask-origin:   border-box|content-box|padding-box|margin-box|fill-box|stroke-box|view-box|initial|inherit;

Exploradores compatibles con .mask-origin

Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
mask-position 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

Referencias técnicas

Echa un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso