Proprietatea mask-image

Proprietatea mask-image permite setarea unei imagini care va fi utilizată ca mască pentru element. Masca determină care părți ale elementului vor fi vizibile și care vor fi ascunse. Ca mască se pot utiliza imagini SVG, PNG sau gradiente.

Sintaxă

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

Valori

Exemplu . Utilizarea SVG ca mască

Aplicăm o imagine SVG cu forma unei inimi ca mască peste o imagine:

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

Результат:

Exemplu . Utilizarea gradientului ca mască

Aplicăm un gradient liniar ca mască pentru un 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);
}

Результат:

Exemplu . Utilizarea elementului SVG ca mască

Creăm o mască folosind un element SVG și o aplicăm pe o imagine:

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

Результат:

Vezi și