Eigenschap mask
De eigenschap mask is een verkorting voor alle maskereigenschappen en maakt het mogelijk om:
een maskerafbeelding, zijn positie, grootte, mengmodus en andere parameters in te stellen.
Is een verkorte eigenschap voor de volgende eigenschappen:
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
Syntaxis
selector {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
Waarden
| Waarde | Beschrijving |
|---|---|
none |
Schakelt maskeren uit (standaardwaarde) |
url() |
Pad naar de maskerafbeelding (SVG, PNG) |
linear-gradient() |
Lineaire gradient als masker |
radial-gradient() |
Radiale gradient als masker |
position |
Positie van het masker (top, center, 50% 50%, etc.) |
size |
Grootte van het masker (cover, contain, 100px 50px) |
repeat |
Herhaling van het masker (no-repeat, repeat-x, space) |
mode |
Mengmodus (alpha, luminance, match-source) |
composite |
Compositie van maskers (add, subtract, intersect, exclude) |
Voorbereiding van afbeeldingen
Stel we hebben een natuurafbeelding die we gaan bijsnijden, en SVG afbeeldingen van een hartje en een pijl, waarlangs we gaan uitknippen:
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
Voorbeeld . Masker-afbeelding
Laten we een hartjesmasker op onze afbeelding leggen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
Voorbeeld . Positie van het masker
Hartjesmasker in de linkerbovenhoek:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
Voorbeeld . Positie van het masker
Hartjesmasker in de rechteronderhoek:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
Voorbeeld . Positie van het masker
Hartjesmasker in het midden links:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
Voorbeeld . Positie van het masker
Hartjesmasker in het midden:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
Voorbeeld . Positie van het masker
Hartjesmasker 100px vanaf links en 200px vanaf boven:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
Voorbeeld . Grootte van het masker cover
De waarde cover schaalt het masker zodat het het element volledig bedekt, waarbij de verhoudingen behouden blijven.
Kan de randen van het masker bijsnijden als de verhoudingen niet overeenkomen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
Voorbeeld . Grootte van het masker contain
De waarde contain schaalt het masker zodat het volledig in het element past,
waarbij de verhoudingen behouden blijven. Kan lege gebieden overlaten:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
Voorbeeld . Grootte van het masker
Een vaste grootte stelt de exacte afmetingen van het masker in.
Laten we bijvoorbeeld een masker maken met een grootte van 50px:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
Voorbeeld . Herhaling no-repeat
De waarde no-repeat schakelt het herhalen van het masker uit.
Het masker wordt slechts één keer weergegeven op de opgegeven positie:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
Voorbeeld . Herhaling repeat-x
De waarde repeat-x herhaalt het masker alleen langs de horizontale as:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
Voorbeeld . Compositie add
De waarde add telt meerdere maskers op (resultaat is de vereniging van alle maskers):
<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;
}
:
Voorbeeld . Compositie intersect
De waarde intersect toont alleen het gebied waar de maskers elkaar overlappen:
<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;
}
:
Voorbeeld . Compositie exclude
De waarde exclude toont de gebieden van de maskers die elkaar niet overlappen:
<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;
}
:
Voorbeeld . Compositie subtract
De waarde subtract trekt het tweede masker af van het eerste.
Laten we bijvoorbeeld een hartje maken en daar
een pijl uit aftrekken:
<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;
}
:
Voorbeeld . Uitgeschreven notatie van mask
De eigenschap mask, geschreven als afzonderlijke onderdelen:
<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;
}
:
Voorbeeld . SVG voor afbeelding
Gebruik van een SVG-element als masker voor een afbeelding:
<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);
}
:
Voorbeeld . SVG voor gradient
Gebruik van een SVG-element als masker voor een gradient:
<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);
}
:
Zie ook
-
eigenschap
mask-position,
bepaalt de positie van het masker ten opzichte van het element -
eigenschap
mask-image,
stelt de afbeelding voor het masker in -
eigenschap
mask-mode,
bepaalt hoe het masker interacteert met de achtergrond -
eigenschap
mask-size,
bepaalt de grootte van het masker -
eigenschap
mask-repeat,
bepaalt de herhaling van het masker -
eigenschap
mask-origin,
bepaalt het positioneringsgebied van het masker -
eigenschap
mask-clip,
bepaalt het afsnijgebied van het masker -
eigenschap
mask-composite,
bepaalt hoe meerdere maskers gecombineerd worden
