Хосияти mask-image

Хосияти mask-image имкон медиҳад, ки тасвиреро муқаррар кунед, ки ҳамчун маска барои унсур истифода мешавад. Маска муайян мекунад, ки кадом қисмҳои унсур намоён ва кадомҳо пинҳон мешаванд. Ҳамчун маска метавон тасвирҳои SVG, PNG ё градиентҳоро истифода бурд.

Синтаксис

cssинтихобкунанда {
  mask-image: none | <image> | <url>;
}

Қиматҳо

Намуна . Истифодаи SVG ҳамчун маска

SVG-тасвири дилчаро ҳамчун маска ба тасвир меандезем:

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

Результат:

Намуна . Истифодаи градиент ҳамчун маска

Градиенти хаттиро ҳамчун маска барои унсур истифода мебарем:

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

Результат:

Намуна . Истифодаи унсури SVG ҳамчун маска

Бо ёрии унсури SVG маска эҷод карда ва онро ба тасвир татбиқ мекунем:

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

Результат:

Инчунин нигаред