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.
Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
mask-position | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |