CSS mask-type 属性

Definition and Usage

mask-type This property specifies whether the SVG <mask> element is to be treated as a luminance mask or an alpha mask.

This property applies to the SVG <mask> element itself.

Example

View two SVG <mask> elements; one uses mask-type: alpha, the other uses 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>

Try It Yourself

CSS Syntax

mask-type: luminance|alpha|initial|inherit;

Property Value

Value Description
luminance Treats the mask image as a luminance mask. Default value.
alpha Treats the mask image as an alpha mask.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: luminance
Inheritance: No
Animation Creation: Not supported. See:Animation-related Properties.
Version: CSS Masking Module Level 1
JavaScript Syntax: object.style.maskType="alpha"

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
24 79 35 7 15

Σχετικές σελίδες

Εκμάθηση:CSS Κάλυμμα

Παραδείγματα:CSS mask 属性

Παραδείγματα:CSS mask-clip 属性

Παραδείγματα:CSS mask-composite 属性

Παραδείγματα:CSS mask-image 属性

Παραδείγματα:CSS mask-mode 属性

Παραδείγματα:CSS mask-origin 属性

Παραδείγματα:CSS mask-position 属性

Παραδείγματα:CSS mask-repeat 属性

Παραδείγματα:CSS mask-size 属性