Lastnost mask-image

Lastnost mask-image omogoča nastavitev slike, ki bo uporabljena kot maska za element. Maska določa, kateri deli elementa bodo vidni in kateri skriti. Kot masko je mogoče uporabiti SVG, PNG slike ali gradienti.

Sintaksa

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

Vrednosti

Primer . Uporaba SVG kot maske

Nanesemo SVG-sliko srčka kot masko na sliko:

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;
}

Результат:

Primer . Uporaba gradienta kot maske

Uporabimo linearni gradient kot masko za 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);
}

Результат:

Primer . Uporaba SVG-elementa kot maske

Ustvarimo masko s pomočjo SVG-elementa in jo uporabimo za sliko:

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;
}

Результат:

Glejte tudi