Xüsusiyyət mask-image

mask-image xüsusiyyəti element üçün mask kimi istifadə olunacaq şəkli təyin etməyə imkan verir. Mask elementin hansı hissələrinin görünəcəyini, hansılarının isə gizlidiləcəyini müəyyən edir. Mask kimi SVG, PNG şəkilləri və ya qradientlər istifadə oluna bilər.

Sintaksis

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

Qiymətlər

Nümunə . Mask kimi SVG istifadəsi

Şəkilin üzərinə mask kimi SVG ürək şəklini tətbiq edək:

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

Результат:

Nümunə . Mask kimi qradient istifadəsi

Element üçün mask kimi xətti qradient tətbiq edək:

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

Результат:

Nümunə . Mask kimi SVG elementinin istifadəsi

SVG elementi vasitəsilə mask yaradaq və onu şəkilə tətbiq edək:

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

Результат:

Həmçinin bax