CSS właściwość mask-type
- Poprzednia strona mask-size
- Następna strona max-block-size
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>
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
- Poprzednia strona mask-size
- Następna strona max-block-size