Eienskap mask-origin

Die eienskap mask-origin stel die verwysingspunt vir die posisionering van die masker. Dit bepaal relatief tot watter deel van die element (die grens, spasiering of inhoud) die masker geplaas sal word.

Sintaksis

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

Waardes

Voorbeeld . border-box

Masker word geposisioneer relatief tot die element se grens:

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

Masker word geposisioneer relatief tot die spasieringsarea:

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

Masker word geposisioneer relatief tot die 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;
}

Результат:

Sien ook