CSS właściwość mask-type

Definicja i zastosowanie

mask-type Atrybut określa, czy element <mask> SVG jest traktowany jako maska jasności czy maska alpha.

Ta właściwość dotyczy samego elementu <mask> SVG.

Przykład

Zobacz dwa elementy <mask> SVG; jeden używa mask-type: alpha, a drugi używa 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>

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
luminance Odbierz obraz maski jako maskę jasności. Domyślna wartość.
alpha Odbierz obraz maski jako maskę alpha.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dochodzi do tej właściwości od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: luminance
Inheredność: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: Moduł Maskowania CSS Poziom 1
Gramatyka JavaScript: object.style.maskType="alpha"

Obsługa przeglądarek

Tabela zawiera wersje przeglądarek, które w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
24 79 35 7 15

Strony związane

Tutorial:CSS Overlay

Odniesienie:CSS właściwość mask

Odniesienie:CSS właściwość mask-clip

Odniesienie:CSS właściwość mask-composite

Odniesienie:CSS właściwość mask-image

Odniesienie:CSS właściwość mask-mode

Odniesienie:CSS właściwość mask-origin

Odniesienie:CSS właściwość mask-position

Odniesienie:CSS właściwość mask-repeat

Odniesienie:CSS właściwość mask-size