Asal topeng - Trik CSS | CSS Almanac 2025

Yang mask-originmenetapkan kawasan kedudukan topeng imej lapisan topeng. Dengan kata lain, ia menentukan di mana asal-usul gambar lapisan topeng, sama ada tepi sempadan, padding atau kotak kandungan.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Untuk elemen yang diberikan sebagai kotak tunggal, mask-originmenentukan kawasan kedudukan topeng. Untuk elemen yang diberikan sebagai berbilang kotak (contohnya, kotak sebaris pada beberapa baris, kotak pada beberapa halaman) harta tanah menentukan kotak mana yang digunakan box-decoration-breakuntuk menentukan kawasan kedudukan topeng.

Properti ini berfungsi seperti background-originharta tanah, kecuali ia mempunyai nilai awal yang berbeza dan tiga nilai tambahan yang berlaku untuk elemen SVG.

Dalam demo berikut, anda boleh mengubah asal gambar lapisan topeng. Terdapat gambar yang sama di bawahnya untuk menunjukkan kesan penyamaran dengan lebih baik dan menandakan kawasan sempadan dan padding:

Sintaks

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Nilai awal: border-box
Berlaku untuk: Semua elemen. Dalam SVG, ia berlaku untuk elemen kontena tidak termasuk elemen, semua elemen grafik dan elemen.
Diwarisi: tidak
Jenis animasi: diskret

Nilai

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Definisi nilai

content-box: Kedudukannya relatif dengan kotak kandungan. Asal mask-imagekedudukan diletakkan di sudut kiri atas tepi kandungan.
padding-box: Kedudukannya relatif dengan kotak padding. Asal gambar topeng di 0 0diposisikan di sudut kiri atas tepi padding, 100% 100%adalah sudut kanan bawah.
border-box: Nilai lalai, yang menetapkan kedudukan relatif dengan kotak sempadan.
margin-box: Kedudukan relatif dengan kotak margin
fill-box: Kedudukannya relatif dengan kotak pengikat objek
stroke-box: Kedudukannya relatif dengan kotak pengikat strok
view-box: Menggunakan viewport SVG terdekat sebagai kotak rujukan. Sekiranya viewBoxatribut ditentukan untuk elemen pembuatan viewport SVG maka kotak rujukan diposisikan pada asal sistem koordinat yang dibentuk oleh viewBoxatribut dan dimensi kotak rujukan diatur ke widthdan heightnilai viewBoxatribut.
initial: Menggunakan tetapan lalai harta tanah, iaituborder-box
inherit: Mengamalkan mask-originnilai ibu bapa.
unset: Mengeluarkan arus mask-origindari elemen.

Menggunakan pelbagai nilai

Properti ini dapat mengambil senarai nilai yang dipisahkan koma untuk asal-usul topeng, di mana setiap nilai diterapkan pada gambar lapisan topeng yang sesuai yang ditentukan dalam mask-imageproperti. Dalam contoh berikut, nilai pertama menentukan asal gambar pertama, nilai kedua menentukan asal gambar kedua, dan seterusnya.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Catatan

Untuk elemen SVG tanpa kotak susun atur CSS yang berkaitan, nilainya content-box, padding-boxdan border-boxhitungkan ke fill-box.
Untuk elemen dengan kotak susun atur CSS yang berkaitan, nilainya fill-box, stroke-boxdan view-boxhitung dengan initialnilai mask-origin, yang border-box.

Demo

Apabila gambar lapisan topeng diulang, contoh pertama diposisikan di sudut kiri atas kawasan kedudukan yang ditentukan, dan kemudian diulang bermula dari sana sesuai dengan nilai mask-repeatharta tanah.

Ubah nilai mask-origindalam demo berikut untuk mendapatkan idea yang lebih baik tentang apa yang berlaku: