Atributo mask-type de CSS
- Página anterior mask-size
- Página siguiente max-block-size
Definición y uso
mask-type
Este atributo especifica si el elemento <mask> de SVG se maneja como una máscara de luminancia o como una máscara alpha.
Esta propiedad se aplica al elemento <mask> de SVG en sí.
Ejemplo
Mire los dos elementos <mask> de SVG; uno usa mask-type: alpha
y el otro usa mask-type: luminance
:
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg"> </defs> <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha"> <rect width="10" height="10" fill="red" fill-opacity="0.7" /> </mask> <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance"> <rect width="10" height="10" fill="red" fill-opacity="0.7" /> </mask> </defs> </svg>
Sintaxis de CSS
mask-type: luminance|alpha|initial|inherit;
Valor del atributo
Valor | Descripción |
---|---|
luminance | Considera la imagen de la máscara como una máscara de luminancia. Valor predeterminado. |
alpha | Considera la imagen de la máscara como una máscara alpha. |
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: | luminance |
---|---|
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.maskType="alpha" |
Compatibilidad del navegador
Los números en la tabla representan la versión del navegador que primero completamente admite esta propiedad.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
24 | 79 | 35 | 7 | 15 |
Páginas relacionadas
Tutoriales:Máscara de CSS
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
- Página anterior mask-size
- Página siguiente max-block-size