mask

Übersicht

The mask property in CSS allows users to alter the visibility of an item by either partially or fully hiding the item. This is accomplished by either masking or clipping the image at specific points.

Initialwert	wie die jeweiligen Kurzschreibweisen: mask-image (en-US): `none` mask-mode (en-US): `match-source` `mask-repeat`: `no-repeat` mask-position (en-US): `center` mask-clip (en-US): `border-box` `mask-origin`: `border-box` mask-size (en-US): `auto` mask-composite (en-US): `add`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs (en-US) Elements und allen Grafikelementen
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: mask-position (en-US): beziehen sich auf die Größe des Maskenzeichenbereichs minus der Größe des Maskenebenenbildes (siehe den Text zu `background-position`)
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: mask-image (en-US): wie angegeben, aber mit absoluten `url` Werten mask-mode (en-US): wie angegeben `mask-repeat`: Besteht aus zwei Schlüsselwörtern, einem pro Richtung mask-position (en-US): Besteht aus zwei Schlüsselwörtern, die den Ursprung und die beiden Versätze vom Ursprung repräsentieren, wobei beide als absolute Länge angegeben werden (falls eine <length> angegeben wurde), ansonsten einen Prozentwert. mask-clip (en-US): wie angegeben `mask-origin`: wie angegeben mask-size (en-US): relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers mask-composite (en-US): wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: mask-image (en-US): diskret mask-mode (en-US): diskret `mask-repeat`: diskret mask-position (en-US): repeatable list of simple list of length, percentage, or calc mask-clip (en-US): diskret `mask-origin`: diskret mask-size (en-US): repeatable list of simple list of length, percentage, or calc mask-composite (en-US): diskret
Erstellt Stapelkontext	Ja

Syntax

/* Schlüsselwortwerte */
mask: none;

/* Bildwerte */
mask: url(mask.png);                       /* Pixelbild, das als Maske verwendet wird */
mask: url(masks.svg#star);                 /* Element mit SVG-Grafik, die als Maske verwendet wird */

/* Kombinierte Werte */
mask: url(masks.svg#star) luminance;       /* Element mit SVG-Grafik, die als Helligkeitsmaske verwendet wird */
mask: url(masks.svg#star) 40px 20px;       /* Element mit SVG-Grafik, die als Maske verwendet wird, die 40px vom oberen Rand und 20px vom linken Rand positioniert ist */
mask: url(masks.svg#star) 0 0/50px 50px;   /* Element mit SVG-Grafik, die als Maske mit einer Breite und Höhe von 50px verwendet wird */
mask: url(masks.svg#star) repeat-x;        /* Element mit SVG-Grafik, die als horizontal wiederholte Maske verwendet wird */
mask: url(masks.svg#star) stroke-box;      /* Element mit SVG-Grafik, die als Maske verwendet wird, die sich bis zur Box erstreckt, die von der Kontur eingeschlossen wird */
mask: url(masks.svg#star) exclude;         /* Element mit SVG-Grafik, die als Maske verwendet wird und deren nicht überlappende Teile mit dem Hintergrund kombiniert werden */

/* Globale Werte */
mask: inherit;
mask: initial;
mask: unset;

Werte

Falls der Wert ein URL Wert ist, wird das Element als SVG-Maske verwendet, dass durch die URI referenziert wird.

<mask-layer>#wobei 
<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>
wobei 
<mask-reference> = none | <image> | <mask-source>
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
<compositing-operator> = add | subtract | intersect | exclude
<masking-mode> = alpha | luminance | match-source
wobei 
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<length-percentage> = <length> | <percentage>
<shape-box> = <box> | margin-box
wobei 
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
<box> = border-box | padding-box | content-box
wobei 
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] [ <resolution> || type(<string>) ]
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
wobei 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
wobei 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>
wobei 
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Beispiele

.target {
  mask: url(#c1);
}

.anothertarget {
  mask: url(resources.svg#c1);
}

Spezifikationen

Spezifikation	Status	Kommentar
CSS Masking Module Level 1 Die Definition von 'mask' in dieser Spezifikation.	Anwärter Empfehlung	Erweitert die Benutzung auf HTML Elemente. Erweitert die Syntax, indem sie als eine Kurzschreibweise für die neuen `mask-*` Eigenschaften in dieser Spezifikation definiert wird.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Die Definition von 'mask' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

BCD tables only load in the browser