Sifat mask-position
Sifat mask-position menetapkan kedudukan awal topeng relatif kepada elemen.
Berfungsi serupa dengan background-position, tetapi digunakan untuk topeng.
Sintaks
selector {
mask-position: <position>;
}
Nilai
| Nilai | Keterangan |
|---|---|
top left |
Di penjuru kiri atas (secara lalai). |
center |
Di tengah elemen. |
50% 50% |
Sama seperti center. |
right bottom |
Di penjuru kanan bawah. |
100px 200px |
Koordinat tepat dalam piksel. |
Contoh . Penengahan topeng
Topeng bentuk hati di tengah gambar:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Contoh . Penjuru kiri atas
Topeng di penjuru kiri atas:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Contoh . Penjuru kanan bawah
Topeng di penjuru kanan bawah:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Contoh . Koordinat tepat
Topeng diletakkan pada koordinat tepat:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Contoh . Penentududukan peratusan
Penentududukan topeng menggunakan peratusan:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Lihat juga
-
sifat
mask-size,
menentukan saiz topeng -
sifat
mask-origin,
menentukan titik rujukan untuk penentududukan -
sifat
mask,
ringkasan untuk semua sifat penutupan
