Asal topeng - Trik CSS | CSS Almanak 2024

The mask-originmenentukan wilayah posisi topeng gambar layer mask. Dengan kata lain, ini menentukan di mana asal dari gambar lapisan topeng, apakah itu tepi perbatasan, bantalan atau kotak konten.

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

Untuk elemen yang dirender sebagai satu kotak, mask-origintentukan area pemosisian topeng. Untuk elemen yang dirender sebagai beberapa kotak (misalnya, kotak sejajar pada beberapa baris, kotak pada beberapa halaman) properti menentukan kotak mana yang box-decoration-breakberoperasi untuk menentukan area pemosisian topeng.

Properti ini berfungsi seperti background-originproperti, kecuali properti ini memiliki nilai awal yang berbeda dan tiga nilai tambahan yang berlaku untuk elemen SVG.

Dalam demo berikut, Anda dapat mengubah asal gambar lapisan topeng. Ada gambar yang sama di bawahnya untuk menunjukkan efek masking yang lebih baik dan menandai area perbatasan dan padding:

Sintaksis

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, ini berlaku untuk elemen kontainer tidak termasuk elemen, semua elemen grafis dan elemen.
Diwariskan: tidak
Jenis animasi: diskrit

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: Posisi relatif terhadap kotak konten. Asal mask-imagediposisikan di sudut kiri atas tepi konten.
padding-box: Posisi relatif terhadap kotak pengisi. Asal gambar topeng di 0 0diposisikan di sudut kiri atas tepi bantalan, 100% 100%adalah sudut kanan bawah.
border-box: Nilai default, yang mengatur posisi relatif terhadap kotak perbatasan.
margin-box: Posisi relatif terhadap kotak margin
fill-box: Posisi relatif terhadap kotak pembatas objek
stroke-box: Posisi relatif terhadap kotak pembatas guratan
view-box: Menggunakan area pandang SVG terdekat sebagai kotak referensi. Jika viewBoxatribut ditentukan untuk SVG viewport menciptakan elemen maka kotak referensi diposisikan pada asal sistem koordinat yang ditetapkan oleh viewBoxatribut dan dimensi kotak referensi diatur ke widthdan heightnilai-nilai dari viewBoxatribut.
initial: Menerapkan pengaturan default properti, yaituborder-box
inherit: Mengadopsi mask-originnilai induk.
unset: Menghapus arus mask-origindari elemen.

Menggunakan banyak nilai

Properti ini dapat mengambil daftar nilai yang dipisahkan koma untuk asal mask, di mana setiap nilai diterapkan ke gambar lapisan mask terkait 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 tata letak CSS terkait, nilai content-box, padding-boxdan border-boxkomputasi ke fill-box.
Untuk elemen dengan kotak tata letak CSS terkait, nilai fill-box, stroke-boxdan view-boxhitung ke initialnilai mask-origin, yaitu border-box.

Demo

Ketika kita memiliki gambar lapisan topeng diulang, contoh pertama diposisikan di sudut kiri atas dari area pemosisian yang ditentukan, dan kemudian diulang mulai dari sana sesuai dengan nilai mask-repeatproperti.

Ubah nilainya mask-origindi demo berikut untuk mendapatkan gambaran yang lebih baik tentang apa yang terjadi: