Egenskaben mask-image

Egenskaben mask-image giver mulighed for at indstille et billede, der vil blive brugt som maske for et element. Masken definerer, hvilke dele af elementet der vil være synlige, og hvilke der vil være skjulte. Som maske kan man bruge SVG, PNG-billeder eller gradienter.

Syntaks

cssselektor {
  mask-image: none | <image> | <url>;
}

Værdier

Eksempel . Brug af SVG som maske

Påfør et SVG-billede af et hjerte som maske på et billede:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 300px;
  mask-repeat: no-repeat;
}

Результат:

Eksempel . Brug af gradient som maske

Anvend en lineær gradient som maske for et element:

html<div id="elem"></div>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask-image: linear-gradient(to right, transparent, black);
}

Результат:

Eksempel . Brug af SVG-element som maske

Opret en maske ved hjælp af et SVG-element og anvend den på et billede:

html<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>

css#image {
  width: 500px;
  height: 281px;
  mask-image: url(#mask);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

Se også