Eigenschap mask-mode

De eigenschap mask-mode stelt de manier in waarop een masker interageert met de achtergrond van een element. Het bepaalt of het masker het alfakanaal (transparantie) of de luminantiewaarden (helderheid) van de maskerafbeelding gebruikt.

Syntaxis

cssselector {
  mask-mode: alpha | luminance | match-source;
}

Waarden

Voorbeeld . Alpha-modus

Toepassing van een SVG-masker in alpha-modus:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
  mask-mode: alpha;
}

Результат:

Voorbeeld . Luminance-modus

Toepassing van een SVG-masker in luminance-modus:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
  mask-mode: luminance;
}

Результат:

Voorbeeld . SVG-masker met match-source modus

Het gebruik van de standaardwaarde (match-source) voor SVG:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="svg-mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#image {
  width: 500px;
  height: 281px;
  mask: url(#svg-mask);
  mask-mode: match-source;
}

Результат:

Voorbeeld . Compositing met verschillende modi

Combineren van maskers met verschillende overlaymodi:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat alpha,
    url("arrow.svg") 200px 30px / 150px no-repeat luminance;
  mask-composite: add;
}

Результат:

Zie ook