Eigenschap mask-origin

De eigenschap mask-origin stelt het referentiepunt voor het positioneren van het masker in. Het bepaalt ten opzichte van welk deel van het element (rand, opvulling of inhoud) het masker wordt geplaatst.

Syntaxis

cssselector {
  mask-origin: content-box | padding-box | border-box;
}

Waarden

Voorbeeld . border-box

Het masker wordt gepositioneerd ten opzichte van de rand van het element:

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

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: border-box;
}

Результат:

Voorbeeld . padding-box

Het masker wordt gepositioneerd ten opzichte van het opvulgebied:

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

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: padding-box;
}

Результат:

Voorbeeld . content-box

Het masker wordt gepositioneerd ten opzichte van de inhoud:

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

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: content-box;
}

Результат:

Zie ook