cursusrooster

CSS Referentie Handboek

CSS-eigenschap

Keuzevak

Aanbevolen cursus:

CodeW3C.com schatkist

CSS mask eigenschap

Vorige pagina marker-start
Volgende pagina mask-clip

Definitie en gebruik

mask De eigenschap wordt gebruikt om elementen te verbergen door middel van een masker of het knippen van een afbeelding (gedeeltelijk of volledig).

mask De eigenschap is een verkorte vorm van de volgende eigenschappen:

Voorbeeld

Voorbeeld 1

Maak een maskerlaag voor een afbeelding:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Probeer het zelf uit

Voorbeeld 2

Maak verschillende maskerlagen voor een afbeelding met lineaire en radiale verloop:

.mask1 {
  mask: linear-gradient(black, transparent);
}
.mask2 {
  mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Probeer het zelf uit

Voorbeeld 3

Gebruik de SVG <mask> element om een maskerlaag voor een afbeelding te maken:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

Probeer het zelf uit

Voorbeeld 4

Gebruik de SVG <mask> element om een maskerlaag voor een afbeelding te maken:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

Probeer het zelf uit

CSS syntaxis

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
mask-image	Specificeer het beeld dat als elementmaskerlaag wordt gebruikt. De standaardwaarde is none.
mask-mode	Specificeer of het maskerlaagbeeld als helderheidsmasker of alpha-masker moet worden beschouwd. De standaardwaarde is match-source.
mask-repeat	Stel in of hoe het maskerbeeld herhaald wordt. De standaardwaarde is repeat.
mask-position	Stel de startpositie van het maskerbeeld in (relatief ten opzichte van het maskerpositiegebied). De standaardwaarde is 0% 0%.
mask-clip	Specificeer het gebied dat wordt beïnvloed door het maskerbeeld. De standaardwaarde is border-box.
mask-origin	Specificeer de startpositie van het maskerlaagbeeld (maskerpositiegebied). De standaardwaarde is border-box.
mask-size	Specificeer de grootte van het maskerlaagbeeld. De standaardwaarde is auto.
mask-composite	Specificeer de compositieoperatie die wordt gebruikt tussen de huidige maskerlaag en de onderliggende maskerlaag. De standaardwaarde is add.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Inherits deze eigenschap van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde:	none match-source repeat 0% 0% border-box border-box auto add
Inheritantie:	Nee
Animatieproductie:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript syntaxis:	object.style.mask="url(star.svg)"