Topeng-klip - Trik CSS

Anonim

The mask-clipharta CSS adalah sebahagian daripada CSS Masking Modul Tahap 1 spesifikasi, dan menetapkan topeng kawasan lukisan. Ini secara harfiah menjepit kawasan latar elemen dan menentukan kawasan mana yang ditunjukkan melalui topeng: sempadan, padding atau kotak kandungan. Ini seperti meletakkan bingkai pada foto, hanya menunjukkan bahagian-bahagian foto yang tidak dilindungi oleh bingkai. Cuma, dalam kes ini, kami menetapkan apa yang terpotong menggunakan nilai Model Kotak CSS.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Ini berfungsi seperti background-clipharta tanah, kecuali ia mempunyai tiga nilai tambahan yang berlaku untuk elemen SVG. Dalam demo berikut, anda boleh menukar kawasan lukisan topeng menggunakan harta tanah ini. Terdapat gambar yang sama di bawahnya untuk menunjukkan kesan penyamaran dengan lebih baik dan menandakan kawasan sempadan dan padding:

Sintaks

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Nilai awal: border-box
  • Berlaku untuk: semua elemen. Dalam SVG, ia berlaku untuk elemen kontena tidak termasuk elemen, semua elemen grafik.
  • Diwarisi: tidak
  • Jenis animasi: diskret

Nilai

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Kandungan yang dilukis dipotong ke kotak sempadan. (Nilai asal)
  • content-box: Kandungan yang dilukis dipotong ke kotak kandungan.
  • fill-box: Kandungan yang dilukis dipotong ke kotak pengikat objek.
  • margin-box: Kandungan yang dilukis dipotong ke kotak margin.
  • padding-box: Kandungan yang dilukis dipotong ke kotak pelapik.
  • stroke-box: Kandungan yang dilukis dipotong ke kotak pengikat stroke.
  • view-box: Menggunakan viewport SVG terdekat sebagai kotak rujukan. Sekiranya viewBoxatribut ditentukan untuk elemen pembuatan viewport SVG:
    • Kotak rujukan diletakkan di tempat asal sistem koordinat yang dibentuk oleh viewBoxatribut.
    • Dimensi kotak rujukan ditetapkan pada widthdan heightnilai viewBoxatribut.
  • no-clip: Kandungan yang dilukis tidak dipotong.
  • initial: Terpakai tetapan lalai hartanah, yang adalah border-box.
  • inherit: Mengamalkan mask-clipnilai ibu bapa.
  • unset: Mengeluarkan arus mask-clipdari elemen.

Catatan

  • Untuk elemen SVG tanpa kotak susun atur CSS yang berkaitan, nilainya content-box, padding-boxhitung ke fill-boxdan untuk border-boxdan margin-boxhitung ke stroke-box.
  • Untuk elemen dengan kotak susun atur CSS yang berkaitan, nilainya fill-boxdihitung untuk content-boxdan untuk stroke-boxdan view-boxdihitung dengan nilai awal mask-clipyang border-box.

Menggunakan pelbagai nilai

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

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

Demo

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
Tidak 79+ 53+ Semua 4+ 15+
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mudah Alih
Semua Semua Semua Semua 59+
Sumber: caniuse

Maklumat lanjut

Artikel pada 6 Nov 2016

Keratan dan Penyamaran dalam CSS

Mojtaba Seyedi