Maskowanie CSS

Źródło: CSS Masking Module Level 1

clip

Obcinanie

Wartość: rect() | auto
Inicjalizacja: auto
Zastosowanie: elementy pozycjonowane absolutnie
Dziedziczenie: nie
Procenty: nie
Media: visual

clip-path

Kształt obcinania

Wartość: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
Inicjalizacja: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

clip-rule

Reguły obcinania

Wartość: nonzero | evenodd
Inicjalizacja: nonzero
Zastosowanie: elementy grafiki SVG
Dziedziczenie: tak
Procenty: nie
Media: visual

mask

Atrybuty mieszane maski

Wartość: <mask-layer>
Inicjalizacja: zobacz cechy indywidualne
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: zobacz cechy indywidualne
Media: visual

mask-border

Atrybuty mieszane maski obrazka obramowania

Wartość: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>
Inicjalizacja: zobacz cechy indywidualne
Zastosowanie: zobacz cechy indywidualne
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-border-mode

Tryb maski obrazka obramowania

Wartość: luminance | alpha
Inicjalizacja: alpha
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-border-outset

Nawis krawędzi

Wartość: [ <length> | <number> ]{1,4}
Inicjalizacja: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-border-repeat

Powtarzanie maski obrazka obramowania

Wartość: [ stretch | repeat | round | space ]{1,2}
Inicjalizacja: stretch
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-border-slice

Obcięcie maski obrazka obramowania

Wartość: <number-percentage>{1,4} fill?
Inicjalizacja: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: odnosi się do rozmiaru maski obrazka obramowania
Media: visual

mask-border-source

Źródło maski obrazka obramowania

Wartość: none | <image>
Inicjalizacja: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-border-width

Szerokość maski obrazka obramowania

Wartość: [ <length-percentage> | <number> | auto ]{1,4}
Inicjalizacja: auto
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: odnosi się do szerokosći/wysokości obszaru maski obrazka obramowani
Media: visual

mask-clip

Obcięcie maski

Wartość: [ <geometry-box> | no-clip ]
Inicjalizacja: border-box
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-composite

Komponowanie warstw maski

Wartość: <compositing-operator>
Inicjalizacja: add
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-image

Źródło obrazka maski

Wartość: <mask-reference>
Inicjalizacja: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-mode

Tryb maski obrazka

Wartość: <masking-mode>
Inicjalizacja: match-source
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-origin

Obszar pozycjonowania

Wartość: <geometry-box>
Inicjalizacja: border-box
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-position

Pozysjonowanie maski obrazka

Wartość: <position>
Inicjalizacja: 0% 0%
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: odnosi się do powierzchni pozycjonowania maski minus rozmiar obrazka maski
Media: visual

mask-repeat

Powtarzanie maski obrazka

Wartość: <repeat-style>
Inicjalizacja: repeat
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-size

Dopasowywanie rozmiaru maski obrazka

Wartość: <bg-size>
Inicjalizacja: auto
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Procenty: nie
Media: visual

mask-type

Typ maski

Wartość: luminance | alpha
Inicjalizacja: luminance
Zastosowanie: elementy maski
Dziedziczenie: nie
Procenty: nie
Media: visual

Przeglądarki

❌ Nie działa
	Chrome	Firefox	Edge	Opera	Safari
`clip: wartość`	1 2008-12-11	1 2004-11-09	12 2015-07-29	7 2003-01-28	1 2003-06-23
`clip: auto`	≤80 2020-02-04	≤72 2020-01-07	≤80 2020-02-07	≤67 2020-03-03	≤13.1 2020-03-24
`clip-path: wartość`	55 2016-12-01	3.5 2009-06-30	79 2020-01-15	42 2016-12-13	9.1 2016-03-21
`clip-rule: wartość`	≤15 2011-10-25	3.5 2009-06-30	79 2020-01-15	15 2013-07-02	≤5 2010-06-07
`clip-rule: evenodd`	≤15 2011-10-25	3.5 2009-06-30	79 2020-01-15	15 2013-07-02	≤5 2010-06-07
`clip-rule: nonzero`	≤15 2011-10-25	3.5 2009-06-30	79 2020-01-15	15 2013-07-02	≤5 2010-06-07
`mask: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-border: wartość`	1 2008-12-11	❌	79 2020-01-15	15 2013-07-02	17.2 2023-12-11
`mask-border-outset: wartość`	1 2008-12-11	❌	79 2020-01-15	15 2013-07-02	17.2 2023-12-11
`mask-border-repeat: wartość`	1 2008-12-11	❌	79 2020-01-15	15 2013-07-02	17.2 2023-12-11
`mask-border-slice: wartość`	1 2008-12-11	❌	79 2020-01-15	15 2013-07-02	17.2 2023-12-11
`mask-border-source: wartość`	1 2008-12-11	❌	79 2020-01-15	15 2013-07-02	17.2 2023-12-11
`mask-border-width: wartość`	1 2008-12-11	❌	79 2020-01-15	15 2013-07-02	17.2 2023-12-11
`mask-clip: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-composite: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-composite: add`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-image: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	❌	15.4 2022-03-14
`mask-mode: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-mode: alpha`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-mode: luminance`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-mode: match-source`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-origin: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-position: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-repeat: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-size: wartość`	120 2023-12-05	53 2017-04-19	120 2023-12-07	106 2023-12-19	15.4 2022-03-14
`mask-type: wartość`	24 2013-01-10	35 2015-01-13	79 2020-01-15	15 2013-07-02	7 2013-10-22
`mask-type: alpha`	24 2013-01-10	35 2015-01-13	79 2020-01-15	15 2013-07-02	7 2013-10-22
`mask-type: luminance`	24 2013-01-10	35 2015-01-13	79 2020-01-15	15 2013-07-02	7 2013-10-22