Klip topeng - Trik CSS

Anonim

The mask-clipproperti CSS adalah bagian dari CSS Masking Modul Level 1 spesifikasi, dan menetapkan masker lukisan daerah. Ini benar-benar klip area latar belakang elemen dan menentukan area mana yang ditampilkan melalui topeng: perbatasan, bantalan atau kotak konten. Ini seperti meletakkan bingkai pada foto, hanya menampilkan bagian-bagian foto yang tidak tercakup oleh bingkai. Hanya, dalam hal ini, kami menyetel apa yang akan dipotong menggunakan nilai Model Kotak CSS.

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

Ini berfungsi seperti background-clipproperti, kecuali ia memiliki tiga nilai tambahan yang berlaku untuk elemen SVG. Dalam demo berikut, Anda dapat mengubah area lukisan topeng menggunakan properti ini. Ada gambar yang sama di bawahnya untuk menunjukkan efek masking yang lebih baik dan menandai area perbatasan dan padding:

Sintaksis

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

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: Konten yang dicat dipotong ke kotak perbatasan. (Nilai default)
  • content-box: Konten yang dicat dipotong ke kotak konten.
  • fill-box: Konten yang dicat dipotong ke kotak pembatas objek.
  • margin-box: Konten yang dicat dipotong ke kotak margin.
  • padding-box: Konten yang dicat dipotong ke kotak pengisi.
  • stroke-box: Konten yang dicat dipotong ke kotak pembatas guratan.
  • view-box: Menggunakan area pandang SVG terdekat sebagai kotak referensi. Jika viewBoxatribut ditentukan untuk elemen pembuatan area pandang SVG:
    • Kotak referensi diposisikan di asal sistem koordinat yang ditetapkan oleh viewBoxatribut.
    • Dimensi kotak referensi diatur ke widthdan heightnilai-nilai dari viewBoxatribut.
  • no-clip: Konten yang dicat tidak dipotong.
  • initial: Menerapkan pengaturan default properti, yaitu border-box.
  • inherit: Mengadopsi mask-clipnilai induk.
  • unset: Menghapus arus mask-clipdari elemen.

Catatan

  • Untuk elemen SVG tanpa kotak tata letak CSS terkait, nilainya content-box, padding-boxdihitung ke fill-boxdan untuk, border-boxdan margin-boxdihitung ke stroke-box.
  • Untuk elemen dengan kotak tata letak CSS terkait, nilai fill-boxmenghitung ke content-boxdan untuk stroke-boxdan view-boxmenghitung ke nilai awalnya mask-clipyaitu border-box.

Menggunakan banyak nilai

Properti ini dapat mengambil daftar nilai yang dipisahkan koma untuk klip topeng dan setiap nilai diterapkan ke gambar lapisan topeng terkait yang ditentukan dalam mask-imageproperti. Dalam contoh berikut, nilai pertama menentukan area lukisan topeng dari gambar pertama, nilai kedua menentukan area lukisan topeng 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

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak 79+ 53+ Semua 4+ 15+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
Semua Semua Semua Semua 59+
Sumber: caniuse

Informasi lebih lanjut

Artikel pada 6 November 2016

Clipping dan Masking di CSS

Mojtaba Seyedi