Properti mask-position

Properti mask-position mengatur posisi awal mask relatif terhadap elemen. Bekerja serupa dengan background-position, tetapi diterapkan pada mask.

Sintaksis

cssselektor {
  mask-position: <position>;
}

Nilai

Contoh . Memusatkan Mask

Mask berbentuk hati di tengah gambar:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Contoh . Sudut Kiri Atas

Mask di sudut kiri atas:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: left top;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Contoh . Sudut Kanan Bawah

Mask di sudut kanan bawah:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: right bottom;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Contoh . Koordinat Tepat

Mask diposisikan berdasarkan koordinat tepat:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 100px 200px;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Contoh . Posisi Persentase

Memposisikan mask menggunakan persentase:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 30% 70%;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Lihat Juga