Properti pengulangan topeng CSS
Contoh
Menggunakan mask-repeat: no-repeat;
dan mask-repeat:
repeat;
:
.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;
}
.mask2 {
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti mask-repeat
menetapkan jika/bagaimana gambar topeng akan diulang.
Secara default, gambar topeng diulang baik secara vertikal maupun horizontal.
Nilai bawaan: | ulang |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.maskRepeat="no-repeat" |
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-repeat | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 3.1 -webkit- | 15.0 -webkit- |
Sintaks CSS
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
Nilai properti
Value | Description |
---|---|
repeat | The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
repeat-x | The mask image is repeated only horizontally |
repeat-y | The mask image is repeated only vertically |
space | The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images |
round | The mask image is repeated and squished or stretched to fill the space (no gaps) |
no-repeat | The mask image is not repeated. The image will only be shown once |
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
Menggunakan mask-repeat: round;
dan mask-repeat:
space;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
Contoh
Menggunakan mask-repeat: repeat-x;
dan mask-repeat:
repeat-y;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
Halaman Terkait
Referensi CSS: properti mask-image
Referensi CSS: properti mode topeng
Referensi CSS: properti mask-origin
Referensi CSS: properti mask-position
Referensi CSS: properti ukuran topeng
Tutorial CSS: Penyamaran CSS