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-origin`: Wert nicht in der DB gefunden! `mask-clip`: Wert nicht in der DB gefunden! `mask-border`: Wert nicht in der DB gefunden!
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `defs` Elements und allen Grafikelementen
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `mask-position`: Wert nicht in der DB gefunden!
Medien	visuell
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `mask-origin`: Wert nicht in der DB gefunden! `mask-clip`: Wert nicht in der DB gefunden! `mask-border`: Wert nicht in der DB gefunden!
Animierbar	wie die jeweiligen Kurzschreibweisen: `mask-position`: Wert nicht in der DB gefunden! `mask-size`: Wert nicht in der DB gefunden!
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik
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> <masking-mode>? || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>
wobei 
<mask-reference> = none | <image> | <mask-source>
<masking-mode> = alpha | luminance | auto
<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
wobei 
<mask-source> = <url>
<shape-box> = <box> | margin-box
wobei 
<box> = border-box | padding-box | content-box

Beispiele

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

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

Spezifikationen

Spezifikation	Status	Kommentar
CSS Masking 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

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Grundlegende Unterstützung (für SVG)	(Ja)	(Ja) [*]	?	(Ja)	(Ja)
Auf HTML Elemente anwendbar	Nicht unterstützt	3.5 (1.9.1)^[1]	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Merkmal	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung (für SVG)	?	?	?	?	?
Auf HTML Elemente anwendbar	?	?	?	?	?

[1] Seit Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) ist der Standard Farbraum für die Verarbeitung von Masken sRGB; zuvor war der Standard (und einzige unterstützte Farbraum) linearRGB. Dies ändert die Darstellung von Maskeneffekten, aber bringt Gecko in Übereinstimmung mit der zweiten Fassung der SVG 1.1 Spezifikation.