Properti posisi topeng CSS
Contoh
Atur posisi gambar layer mask ke tengah:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti mask-position
menetapkan posisi awal gambar topeng (relatif terhadap area posisi topeng).
Tip: Secara default, gambar topeng ditempatkan di sudut kiri atas elemen, dan diulang baik secara vertikal maupun horizontal.
Nilai bawaan: | 0% 0% |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.maskPosition="pusat 100px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka diikuti oleh -webkit- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
mask-position | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Sintaks CSS
mask-position: value;
Nilai properti
Value | Description |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom |
If you only specify one keyword, the other value will be "center" |
x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% |
xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Atur posisi gambar layer mask ke pojok kanan bawah:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 100% 100%;
mask-position: 100% 100%;
}
Halaman Terkait
Referensi CSS: properti mask-image
Referensi CSS: properti mode topeng
Referensi CSS: properti mask-origin
Referensi CSS: properti mask-repeat
Referensi CSS: properti ukuran topeng
Tutorial CSS: Penyamaran CSS