Eigenschaft mask
Die Eigenschaft mask ist eine Kurzschreibweise für alle Maskierungseigenschaften und erlaubt es:
ein Maskenbild, dessen Position, Größe, Mischmodus und andere Parameter festzulegen.
Ist die Kurzschreibweise für die folgenden Eigenschaften:
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
Syntax
Selektor {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
Werte
| Wert | Beschreibung |
|---|---|
none |
Deaktiviert die Maskierung (Standardwert) |
url() |
Pfad zum Maskenbild (SVG, PNG) |
linear-gradient() |
Linearer Gradient als Maske |
radial-gradient() |
Radialer Gradient als Maske |
position |
Position der Maske (top, center, 50% 50% etc.) |
size |
Größe der Maske (cover, contain, 100px 50px) |
repeat |
Wiederholung der Maske (no-repeat, repeat-x, space) |
mode |
Mischmodus (alpha, luminance, match-source) |
composite |
Komposition von Masken (add, subtract, intersect, exclude) |
Bilder vorbereiten
Nehmen wir an, wir haben ein Naturbild, das wir zuschneiden werden, und SVG-Bilder eines Herzens und eines Pfeils, nach denen wir ausschneiden werden:
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
Beispiel . Bildmaske
Lassen Sie uns eine Herz-Maske auf unser Bild legen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
Beispiel . Maskenposition
Herz-Maske in der oberen linken Ecke:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
Beispiel . Maskenposition
Herz-Maske in der unteren rechten Ecke:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
Beispiel . Maskenposition
Herz-Maske mittig links:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
Beispiel . Maskenposition
Herz-Maske zentriert:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
Beispiel . Maskenposition
Herz-Maske bei 100px von links und 200px von oben:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
Beispiel . Maskengröße cover
Der Wert cover skaliert die Maske, um das Element vollständig zu bedecken, wobei die Proportionen erhalten bleiben.
Kann die Ränder der Maske beschneiden, wenn die Proportionen nicht übereinstimmen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
Beispiel . Maskengröße contain
Der Wert contain skaliert die Maske, um sie vollständig in das Element einzupassen,
wobei die Proportionen erhalten bleiben. Kann leere Bereiche hinterlassen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
Beispiel . Maskengröße
Eine feste Größe legt die exakten Abmessungen der Maske fest.
Lassen Sie uns zum Beispiel eine Maske mit einer Größe von 50px erstellen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
Beispiel . Wiederholung no-repeat
Der Wert no-repeat deaktiviert die Wiederholung der Maske.
Die Maske wird nur einmal an der angegebenen Position angezeigt:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
Beispiel . Wiederholung repeat-x
Der Wert repeat-x wiederholt die Maske nur entlang der horizontalen Achse:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
Beispiel . Komposition add
Der Wert add addiert mehrere Masken (Ergebnis ist die Vereinigung aller Masken):
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 200px 30px / 150px no-repeat;
mask-composite: add;
}
:
Beispiel . Komposition intersect
Der Wert intersect zeigt nur den Bereich der Schnittmenge der Masken:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: intersect;
}
:
Beispiel . Komposition exclude
Der Wert exclude zeigt die Bereiche der Masken an, die sich nicht überschneiden:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: exclude;
}
:
Beispiel . Komposition subtract
Der Wert subtract subtrahiert die zweite Maske von der ersten.
Lassen Sie uns zum Beispiel ein Herz erstellen und davon
einen Pfeil subtrahieren:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 250px no-repeat,
url("arrow.svg") 170px 80px / 120px no-repeat;
mask-composite: subtract;
}
:
Beispiel . Ausgeschriebene Schreibweise von mask
Die Eigenschaft mask, geschrieben als einzelne Bestandteile:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-origin: content-box;
mask-clip: content-box;
mask-mode: alpha;
mask-composite: add;
}
:
Beispiel . SVG für Bild
Verwendung eines SVG-Elements als Maske für ein Bild:
<img id="image" src="image.jpg">
<svg width="0" height="0">
<mask id="mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#image {
width: 500px;
height: 281px;
background: red;
mask: url(#mask);
}
:
Beispiel . SVG für Gradient
Verwendung eines SVG-Elements als Maske für einen Gradienten:
<div id="elem"></div>
<svg width="0" height="0">
<mask id="star-mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask: url(#star-mask);
}
:
Siehe auch
-
Eigenschaft
mask-position,
definiert die Position der Maske relativ zum Element -
Eigenschaft
mask-image,
legt das Bild für die Maske fest -
Eigenschaft
mask-mode,
definiert, wie die Maske mit dem Hintergrund interagiert -
Eigenschaft
mask-size,
definiert die Größe der Maske -
Eigenschaft
mask-repeat,
definiert die Wiederholung der Maske -
Eigenschaft
mask-origin,
definiert den Positionierungsbereich der Maske -
Eigenschaft
mask-clip,
definiert den Abschneidebereich der Maske -
Eigenschaft
mask-composite,
definiert, wie mehrere Masken kombiniert werden
