Sifat mask-image

Sifat mask-image membolehkan anda menetapkan imej yang akan digunakan sebagai topeng untuk unsur. Topeng menentukan bahagian unsur mana yang akan kelihatan dan mana yang akan disembunyikan. SVG, imej PNG atau gradien boleh digunakan sebagai topeng.

Sintaks

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

Nilai

Contoh . Menggunakan SVG sebagai Topeng

Letakkan imej SVG bentuk hati sebagai topeng pada gambar:

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

Результат:

Contoh . Menggunakan Gradien sebagai Topeng

Gunakan gradien linear sebagai topeng untuk unsur:

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

Результат:

Contoh . Menggunakan Unsur SVG sebagai Topeng

Buat topeng menggunakan unsur SVG dan gunakannya pada gambar:

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

Результат:

Lihat juga