Ciri mask-size
Ciri mask-size menetapkan saiz imej topeng. Anda boleh menetapkan saiz khusus dalam piksel/peratus atau menggunakan kata kunci cover dan contain.
Sintaks
selector {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Nilai
| Nilai | Keterangan |
|---|---|
auto |
Saiz asal imej (lalai). |
cover |
Skala topeng mengekalkan perkadaran untuk menutup elemen sepenuhnya. |
contain |
Skala topeng mengekalkan perkadaran untuk memuatkan sepenuhnya ke dalam elemen. |
100px 50px |
Saiz khusus dalam piksel. |
50% 100% |
Saiz dalam peratus daripada saiz elemen. |
Contoh . Saiz cover
Topeng dikesarkan untuk menutup elemen sepenuhnya:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Contoh . Saiz contain
Topeng dikesarkan untuk memuat sepenuhnya ke dalam elemen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Contoh . Saiz tetap dalam piksel
Topeng bersaiz 150×150 piksel:
<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 . Saiz dalam peratus
Topeng mengambil 80% lebar dan 60% ketinggian elemen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Contoh . Saiz berbeza pada paksi
Topeng 200px lebar dan 100px tinggi:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
Lihat juga
-
ciri
mask-position,
menentukan kedudukan topeng -
ciri
mask-repeat,
menentukan pengulangan topeng -
ciri
mask,
penyingkatan untuk semua ciri penutupan
