CSS -Maskierung
Mit CSS-Maskierung erstellen Sie eine Maskenebene, die über einem Element platziert wird, um Teile des Elements teilweise oder vollständig auszublenden.
Die CSS-mask-image-Eigenschaft
Die CSS mask-image-Eigenschaft gibt ein Maskenebenenbild an.
Das Bild der Maskenebene kann ein PNG-Bild, ein SVG-Bild, ein CSS-Verlauf oder ein SVG-<mask>-Element sein .
Browser-Unterstützung
Hinweis: Die meisten Browser unterstützen CSS-Maskierung nur teilweise. In den meisten Browsern müssen Sie zusätzlich zur Standardeigenschaft das Präfix -webkit- verwenden.
Die Zahlen in der folgenden Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt. Zahlen gefolgt von -webkit- geben die erste Version an, die mit einem Präfix funktioniert hat.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Verwenden Sie ein Bild als Maskenebene
Um ein PNG- oder SVG-Bild als Maskenebene zu verwenden, verwenden Sie einen url()-Wert, um das Bild der Maskenebene zu übergeben.
Das Maskenbild muss einen transparenten oder halbtransparenten Bereich haben. Schwarz bedeutet vollständig transparent.
Hier ist das Maskenbild (ein PNG-Bild), das wir verwenden werden:
Hier ist ein Bild aus Cinque Terre in Italien:
Jetzt wenden wir das Maskenbild (das PNG-Bild oben) als Maskenebene für das Bild aus Cinque Terre, Italien an:
Beispiel
Hier ist der Quellcode:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Beispiel erklärt
Die mask-imageEigenschaft gibt das Bild an, das als Maskenebene für ein Element verwendet werden soll.
Die mask-repeatEigenschaft gibt an, ob oder wie ein Maskenbild wiederholt wird. Der no-repeat
Wert gibt an, dass das Maskenbild nicht wiederholt wird (das Maskenbild wird nur einmal angezeigt).
Ein anderes Beispiel
Wenn wir die mask-repeatEigenschaft weglassen, wird das Maskenbild im gesamten Bild von Cinque Terre, Italien, wiederholt:
Beispiel
Hier ist der Quellcode:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Verwenden Sie Farbverläufe als Maskenebene
Lineare und radiale CSS-Verläufe können auch als Maskenbilder verwendet werden.
Beispiele für lineare Gradienten
Hier verwenden wir einen linearen Farbverlauf als Maskenebene für unser Bild. Dieser lineare Farbverlauf geht von oben (schwarz) nach unten (transparent):
Beispiel
Verwenden Sie einen linearen Farbverlauf als Maskenebene:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Hier verwenden wir einen linearen Farbverlauf zusammen mit Textmaskierung als Maskenebene für unser Bild:
Die Cinque Terre ist ein Küstengebiet in Ligurien im Nordwesten Italiens. Es liegt im Westen der Provinz La Spezia und umfasst fünf Dörfer: Monterosso al Mare, Vernazza, Corniglia, Manarola und Riomaggiore.
Die Cinque Terre ist ein Küstengebiet in Ligurien im Nordwesten Italiens. Es liegt im Westen der Provinz La Spezia und umfasst fünf Dörfer: Monterosso al Mare, Vernazza, Corniglia, Manarola und Riomaggiore.
Die Cinque Terre ist ein Küstengebiet in Ligurien im Nordwesten Italiens. Es liegt im Westen der Provinz La Spezia und umfasst fünf Dörfer: Monterosso al Mare, Vernazza, Corniglia, Manarola und Riomaggiore.
Beispiel
Verwenden Sie einen linearen Farbverlauf zusammen mit Textmaskierung als Maskenebene:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Beispiele für radiale Farbverläufe
Hier verwenden wir einen radialen Farbverlauf (als Kreis geformt) als Maskenebene für unser Bild:
Beispiel
Verwenden Sie einen radialen Farbverlauf als Maskenebene (einen Kreis):
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Hier verwenden wir einen radialen Farbverlauf (als Ellipse geformt) als Maskenebene für unser Bild:
Beispiel
Verwenden Sie einen anderen radialen Farbverlauf als Maskenebene (eine Ellipse):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
Verwenden Sie SVG als Maskenebene
Das SVG <mask>-Element kann innerhalb einer SVG-Grafik verwendet werden, um Maskierungseffekte zu erzeugen.
Hier verwenden wir das SVG <mask>-Element, um verschiedene Maskenebenen für unser Bild zu erstellen:
Beispiel
Eine SVG-Maskenebene (als Dreieck geformt):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Beispiel
Eine SVG-Maskenebene (als Stern geformt):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Beispiel
Eine SVG-Maskenebene (als Kreise geformt):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
CSS-Maskierungseigenschaften
Die folgende Tabelle listet alle CSS-Maskierungseigenschaften auf:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |