CSS -maskering
Met CSS-maskering maakt u een maskerlaag om over een element te plaatsen om delen van het element gedeeltelijk of volledig te verbergen.
De CSS mask-image eigenschap
De CSS mask-image-eigenschap specificeert een maskerlaagafbeelding.
De afbeelding van de maskerlaag kan een PNG-afbeelding, een SVG-afbeelding, een CSS-verloop of een SVG <mask>-element zijn .
Browserondersteuning
Opmerking: de meeste browsers bieden slechts gedeeltelijke ondersteuning voor CSS-maskering. In de meeste browsers moet u naast de standaardeigenschap het voorvoegsel -webkit- gebruiken.
De cijfers in de onderstaande tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt. Getallen gevolgd door -webkit- specificeren de eerste versie die met een prefix werkte.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Gebruik een afbeelding als de maskerlaag
Als u een PNG- of een SVG-afbeelding als maskerlaag wilt gebruiken, gebruikt u een url()-waarde om in de maskerlaagafbeelding door te geven.
De maskerafbeelding moet een transparant of semi-transparant gebied hebben. Zwart geeft volledig transparant aan.
Hier is de maskerafbeelding (een PNG-afbeelding) die we zullen gebruiken:
Hier is een afbeelding van Cinque Terre, in Italië:
Nu passen we de maskerafbeelding (de PNG-afbeelding hierboven) toe als de maskerlaag voor de afbeelding uit Cinque Terre, Italië:
Voorbeeld
Hier is de broncode:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Voorbeeld uitgelegd
De mask-imageeigenschap specificeert de afbeelding die als maskerlaag voor een element moet worden gebruikt.
De mask-repeateigenschap specificeert of en hoe een maskerafbeelding wordt herhaald. De no-repeat
waarde geeft aan dat de maskerafbeelding niet wordt herhaald (de maskerafbeelding wordt slechts één keer weergegeven).
Een ander voorbeeld
Als we de eigenschap weglaten mask-repeat, wordt de maskerafbeelding overal in de afbeelding van Cinque Terre, Italië herhaald:
Voorbeeld
Hier is de broncode:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Verlopen gebruiken als maskerlaag
CSS lineaire en radiale gradiënten kunnen ook worden gebruikt als maskerafbeeldingen.
Voorbeelden van lineaire gradiënten
Hier gebruiken we een lineair verloop als maskerlaag voor onze afbeelding. Deze lineaire gradiënt gaat van boven (zwart) naar beneden (transparant):
Voorbeeld
Gebruik een lineair verloop als maskerlaag:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Hier gebruiken we een lineair verloop samen met tekstmaskering als de maskerlaag voor onze afbeelding:
De Cinque Terre is een kustgebied in Ligurië, in het noordwesten van Italië. Het ligt in het westen van de provincie La Spezia en bestaat uit vijf dorpen: Monterosso al Mare, Vernazza, Corniglia, Manarola en Riomaggiore.
De Cinque Terre is een kustgebied in Ligurië, in het noordwesten van Italië. Het ligt in het westen van de provincie La Spezia en bestaat uit vijf dorpen: Monterosso al Mare, Vernazza, Corniglia, Manarola en Riomaggiore.
De Cinque Terre is een kustgebied in Ligurië, in het noordwesten van Italië. Het ligt in het westen van de provincie La Spezia en bestaat uit vijf dorpen: Monterosso al Mare, Vernazza, Corniglia, Manarola en Riomaggiore.
Voorbeeld
Gebruik een lineair verloop samen met tekstmaskering als maskerlaag:
.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);
}
Voorbeelden van radiale gradiënten
Hier gebruiken we een radiaal verloop (in de vorm van een cirkel) als maskerlaag voor onze afbeelding:
Voorbeeld
Gebruik een radiaal verloop als maskerlaag (een cirkel):
.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 gebruiken we een radiaal verloop (in de vorm van een ellips) als maskerlaag voor onze afbeelding:
Voorbeeld
Gebruik een ander radiaal verloop als maskerlaag (een ellips):
.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));
}
SVG gebruiken als de maskerlaag
Het SVG <mask>-element kan in een SVG-afbeelding worden gebruikt om maskeringseffecten te creëren.
Hier gebruiken we het SVG <mask>-element om verschillende maskerlagen voor onze afbeelding te maken:
Voorbeeld
Een SVG-maskerlaag (gevormd als een driehoek):
<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>
Voorbeeld
Een SVG-maskerlaag (gevormd als een ster):
<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>
Voorbeeld
Een SVG-maskerlaag (gevormd als cirkels):
<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>
Eigenschappen voor CSS-maskering
De volgende tabel bevat alle CSS-maskeringseigenschappen:
| 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 |