Masking dalam penyemak imbas dengan CSS dan SVG

Masking adalah teknik yang membolehkan anda memaparkan bahagian terpilih elemen atau imej pada skrin sambil menyembunyikan selebihnya. Pemaju web boleh menggunakan teknik ini dalam penyemak imbas melalui harta topeng dan elemen topeng SVG. Ciri -ciri ini membolehkan anda memaparkan kesan pelekat pada imej dan elemen lain dalam penyemak imbas tanpa menggunakan sebarang jenis perisian penyuntingan imej.

Dalam artikel ini, saya akan menunjukkan keupayaan CSS dan SVG Masking dalam tindakan, juga memastikan untuk memasukkan beberapa maklumat mengenai isu sokongan penyemak imbas semasa.

Pada masa penulisan, kebanyakan sampel kod hanya berfungsi dalam pelayar WebKit manakala topeng berasaskan SVG nampaknya menikmati sokongan penyemak imbas yang lebih luas. Oleh itu, jika anda ingin mencuba contoh, saya cadangkan anda menggunakan pelayar WebKit seperti Chrome.

Takeaways Key

Masking dalam CSS dan SVG membolehkan penglihatan elemen selektif, menggunakan sama ada harta CSS `mask` atau elemen SVG`
• .
Masking CSS boleh menggunakan imej, kecerunan, atau rujukan SVG, manakala SVG Masking menawarkan lebih banyak kawalan dengan grafik vektor dan menyokong topeng warna dan kecerunan.
Sokongan penyemak imbas berbeza -beza: Topeng CSS disokong terutamanya dalam pelayar WebKit, manakala topeng SVG mempunyai keserasian yang lebih luas di seluruh pelayar moden termasuk Firefox dan Internet Explorer.
sifat topeng seperti `mask-image`,` mask-mod Untuk kemudahan.
• Kesan pelekat lanjutan, termasuk animasi dan menggunakan teks sebagai topeng, boleh dicapai dengan kedua -dua CSS dan SVG, meningkatkan fleksibiliti dan kreativiti reka bentuk web.
masking di web

Anda boleh mencapai kesan pelekat di web menggunakan keratan atau masking.

Keratan melibatkan meletakkan bentuk vektor tertutup, seperti bulatan atau poligon, di atas imej atau elemen. Mana -mana bahagian imej di belakang bentuk akan kelihatan, manakala mana -mana bahagian di luar sempadan bentuk akan tersembunyi. Batasan bentuk dipanggil laluan klip, dan anda menciptanya menggunakan harta klip-laluan.

Masking dilakukan menggunakan imej PNG, kecerunan CSS, atau elemen SVG untuk menyembunyikan beberapa bahagian imej atau elemen lain pada halaman. Anda boleh mencapai ini menggunakan harta topeng CSS.

Dalam artikel ini, saya akan fokus secara eksklusif pada pelindung dengan harta topeng CSS dan elemen SVG .

harta topeng CSS

topeng adalah harta CSS sworthand untuk sekumpulan sifat individu. Mari kita lihat dengan lebih dekat beberapa daripada mereka dengan lebih terperinci.

Harta Topeng-Imej

Anda boleh menggunakan harta imej topeng untuk menetapkan imej lapisan topeng elemen.

Nilai tidak sama dengan menetapkan tiada nilai sama sekali. Sebaliknya - ia masih dianggap sebagai lapisan imej hitam telus.

anda boleh menetapkan imej topeng ke nilai URL. Ini boleh menjadi laluan ke fail imej PNG, fail SVG, atau rujukan kepada elemen SVG . Anda boleh menetapkan lebih daripada satu lapisan imej topeng dengan menambahkan bilangan nilai URL yang sepadan dengan koma.

Berikut adalah beberapa contoh:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

ini adalah bagaimana anda merujuk elemen SVG dengan id mask1 :

.masked-element {
  mask-image: url(#mask1);
}

Imej kecerunan juga merupakan nilai yang sesuai untuk harta imej topeng:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

harta topeng mod

dengan mod topeng anda boleh menetapkan imej lapisan topeng sama ada topeng alfa atau topeng luminance.

Topeng Alpha adalah imej dengan saluran Alpha. Secara lebih terperinci, saluran Alpha adalah maklumat ketelusan yang terkandung dalam setiap data piksel. Operasi masking dengan harta topeng mod yang ditetapkan ke Alpha akan menggunakan nilai alpha imej sebagai nilai topeng.

Contoh berguna saluran alfa adalah imej PNG dengan kawasan hitam dan telus. Unsur bertopeng akan menunjukkan melalui bahagian hitam imej topeng, yang mempunyai nilai alpha satu. Segala -galanya di bawah bahagian telus, yang mempunyai nilai alfa sifar, akan disembunyikan.

Saya akan menggunakan imej PNG ini sebagai topeng alpha saya:

dan melakukan operasi pelekat pada imej JPG di bawah:

ini adalah di mana sihir berlaku:

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

Dan inilah hasilnya seperti dalam penyemak imbas:

topeng luminance menggunakan nilai luminance imej sebagai nilai topeng. Imej PNG seperti yang di atas - tetapi berwarna putih - adalah contoh yang baik dari topeng pencahayaan:

Bidang elemen yang anda mahu topeng, yang dilindungi oleh piksel putih topeng, akan ditunjukkan. Bahagian elemen bertopeng yang diliputi oleh piksel telus topeng akan tersembunyi.

Menetapkan harta topeng topeng ke luminance dan menggunakan imej di atas sebagai topeng saya, akan memaparkan hasil yang sama seperti sebelumnya.

inilah kod:

.masked-element {
  mask-image: url(luminance-mask.png);
  mask-mode: luminance;
}

Harta Topeng-Repeat

Topeng-repeat berfungsi seperti harta latar belakang. Ia mengawal jubin imej lapisan topeng selepas anda menetapkan saiz dan kedudukan mereka.

Nilai yang mungkin adalah:

• No-Repeat: Imej lapisan topeng tidak diulangi di ruang yang ada.
• READE-X: Imej lapisan topeng diulang sepanjang koordinat x.
• Ulang-y: Imej lapisan topeng diulangi ke bawah koordinat Y.
• Ruang: Imej lapisan topeng diulang dan jarak jauh di seluruh kawasan yang ada.
• bulat: Imej lapisan topeng diulangi sebilangan kali di seluruh kawasan yang ada. Sekiranya nombor keseluruhan tidak sesuai dengan ruang yang ada, imej itu diperkuat sehingga ia berlaku.

Contohnya, ini adalah imej yang saya ingin gunakan sebagai topeng saya:

coretan kod di bawah menetapkan harta topeng-repeat kepada nilai ruang:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

mengakibatkan kesan pelekat berikut:

harta topeng-kedudukan

Anda boleh meletakkan imej lapisan topeng menggunakan harta topeng-kedudukan. Anda boleh menetapkan harta ini kepada nilai yang sama yang akan anda gunakan untuk harta latar belakang CSS yang lebih biasa. Nilai awalnya adalah pusat.

Contohnya, jika anda ingin meletakkan lapisan imej topeng di sudut kiri atas viewport, tetapkan harta topeng-kedudukan kepada nilai

0

:

inilah yang kelihatan seperti kod di atas penyemak imbas:

.masked-element {
  mask-image: url(#mask1);
}

Menukar nilai harta topeng topeng di atas ke 100% 100%

, memaparkan imej lapisan topeng di bahagian bawah kanan viewport:

harta saiz topeng

Anda boleh dengan cepat menetapkan saiz imej lapisan topeng anda menggunakan harta saiz topeng, yang menerima nilai yang sama dengan harta saiz latar belakang CSS yang lebih biasa.

Sebagai contoh, menetapkan saiz topeng hingga 50% memaparkan imej lapisan topeng pada 50% lebar penuhnya:

menetapkan saiz topeng untuk mengandungi akan skala imej lapisan topeng ke saiz terbesar supaya kedua-dua lebar dan ketinggiannya boleh muat di dalam kawasan kedudukan topeng:

anda dapat melihat demo ini hidup dalam tindakan di codepen di bawah:

lihat contoh pena css topeng oleh sitepoint (@sitePoint) pada codepen.

Komposisi lapisan topeng

Seperti yang dijelaskan di atas, anda boleh menggunakan lebih daripada satu lapisan topeng pada elemen yang sama dengan memisahkan setiap nilai harta topeng topeng dengan koma. Lapisan disusun satu di atas yang lain dengan lapisan terakhir yang memaparkan pertama pada skrin.

misalnya:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

Dalam coretan di atas, mask2.png berlapis di atas mask1.png .

Hartanah komposit topeng membolehkan anda menggabungkan lapisan topeng yang berbeza mengikut nilai kata kunci berikut:

• Tambah: dicat di atas mask1.png
tolak: Memaparkan bahagian
• mask2.png yang tidak bertindih mask1.png . Pelayar tidak menyokong kata kunci standard, oleh itu, sekurang-kurangnya pada masa ini, anda perlu menggunakan sumber pengendali kata kunci pengendali yang sepadan
Intersect: Memaparkan bahagian -bahagian
• mask2.png yang bertindih mask1.png . Walau bagaimanapun, penyemak imbas WebKit, yang merupakan satu-satunya pelayar yang menyokong topeng CSS, nampaknya tidak memaparkan apa-apa pada skrin, walaupun kata kunci sumber komposit yang tidak standard digunakan.
tidak termasuk: Memaparkan bahagian
• mask1.png dan mask2.png yang tidak bertindih. Sekali lagi, kerana kata kunci standard tidak mempunyai sokongan lagi, anda lebih baik menggunakan pengendali pengendali XOR.

anda boleh menyemak demo langsung dalam demo codepen di bawah juga:

lihat pena CSS Mask Compositing oleh SitePoint (@SitePoint) pada Codepen.

harta tanah topeng

anda boleh menetapkan semua sifat yang mengawal operasi masking CSS dalam satu pergi menggunakan topeng.

Berikut adalah topeng penuh Shorthand:

.masked-element {
  mask-image: url(#mask1);
}

kerja-kerja asal topeng dan topeng seperti asal-usul latar belakang dan latar belakang yang lebih biasa.

Walaupun anda boleh menyusun semula sifat-sifat dalam topeng, anda perlu menetapkan harta saiz topeng selepas harta topeng topeng, dipisahkan oleh simbol "/". Juga, menetapkan saiz topeng tanpa menetapkan kedudukan topeng akan menghasilkan perisytiharan yang tidak sah.

Akhirnya, kerana apa -apa nilai yang anda gagal untuk menentukan pada harta topeng ditetapkan kembali ke nilai lalai awalnya, dengan menggunakan topeng sangat berguna apabila anda perlu menetapkan semula mana -mana sifat individu.

elemen topeng SVG

grafik vektor berskala, atau SVG untuk pendek, adalah bahasa berasaskan XML untuk menandakan grafik.

Anda boleh menggunakan elemen di dalam dokumen SVG untuk menambah kesan pelekat ke elemen HTML dan grafik SVG yang lain.

Satu lagi perkara yang boleh anda lakukan dengan SVG adalah menutup elemen lain pada halaman menggunakan teks.

mari kita lihat lebih dekat ke dalam setiap kemungkinan ini.

menggunakan elemen SVG pada elemen HTML

Pada masa penulisan, menggunakan elemen di dalam grafik SVG inline untuk menutup elemen HTML hanya berfungsi dalam pelayar Firefox. Berikut adalah contoh:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

dengan CSS berikut:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

Dalam kod di atas, saya telah memasukkan elemen dengan id mask1 . Di dalam topeng saya telah meletakkan kecerunan hitam dan putih dengan id grad dan bentuk bulatan yang menggunakan kecerunan sebagai warna mengisi.

Akhirnya, saya telah merujuk nilai ID SVG dalam harta topeng CSS. Ini menggunakan kesan pelekat pada imej pada halaman.

Hanya dengan menambahkan beberapa deklarasi gaya lain untuk latar belakang halaman dan imej bertopeng, anda boleh mencapai kesan yang cukup dramatik seperti yang di bawah:

Perhatikan bagaimana bahagian topeng bulatan yang diisi dengan naungan putih kecerunan membolehkan imej bertopeng menunjukkan melalui. Sebaliknya, bahagian yang dipenuhi dengan warna hitam kecerunan menyembunyikan imej bertopeng.

Berikut adalah demo langsung ini di Codepen (ingat, ia hanya akan berfungsi pada Firefox!) .

lihat pena pena dengan elemen topeng SVG inline oleh SitePoint (@SitePoint) pada codepen.

menggunakan elemen SVG pada grafik SVG

Anda boleh menggunakan elemen SVG yang sama dari contoh sebelumnya, tetapi kali ini untuk menutup grafik SVG dan bukannya elemen HTML. Kelebihannya ialah sokongan penyemak imbas adalah lebih baik, termasuk pelayar WebKit dan IE terbaru.

Di dalam coretan di bawah, saya akan meletakkan imej yang saya mahu menutupi elemen SVG dan memohon harta topeng CSS kepadanya. Propertinya topeng CSS merujuk elemen SVG dengan id mask1 , seperti dalam contoh sebelumnya. Inilah kod untuk grafik SVG bertopeng:

.masked-element {
  mask-image: url(#mask1);
}

dan ini adalah coretan yang menjaga operasi pelekat dalam CSS:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

Hasilnya hampir sama dengan contoh sebelumnya, hanya kali ini anda dapat melihatnya pada semua pelayar utama.

Lihatlah demo codepen:

lihat topeng pena svg pada elemen SVG oleh sitepoint (@sitePoint) pada codepen.

masking dengan teks svg

anda boleh melakukan operasi pelekat menggunakan elemen teks di dalam topeng SVG anda:

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

.masked-element {
  mask-image: url(luminance-mask.png);
  mask-mode: luminance;
}

Coretan di atas menambah elemen teks SVG hitam di dalam topeng SVG dan memohon kepada bentuk elips SVG biru muda menggunakan sifat topeng CSS. Apa pun yang terletak di belakang bentuk elips (dalam kes ini ia adalah imej latar belakang badan) akan ditunjukkan melalui teks. Hasilnya kelihatan seperti ini:

Kod penuh tersedia di Codepen:

lihat topeng teks pena svg oleh sitepoint (@sitePoint) pada codepen.

Animasi topeng

anda boleh menghidupkan kedudukan topeng dan saiz topeng menggunakan peralihan CSS dan animasi kerangka utama.

di bawah adalah contoh animasi kerangka utama asas imej topeng PNG berbentuk bintang.

Berikut adalah coretan kod yang berkaitan:

elemen bertopeng adalah html tag:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

Operasi Masking menggunakan harta Masker Shorthand:

.masked-element {
  mask-image: url(#mask1);
}

kelas .animate pada elemen menambah pergerakan ke imej berbentuk bintang menggunakan transformasi dan animasi CSS:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

Lancarkan penyemak imbas WebKit seperti Chrome dan lihat demo langsung berikut di Codepen:

Lihat pena yang menghidupkan dengan topeng CSS oleh Maria Antonietta Perna (@antonietta) pada codepen.

menghidupkan elemen topeng SVG dengan CSS

anda boleh menambah kesan pelekat pada tag menggunakan elemen SVG dan kemudian menghidupkannya dengan CSS.

Berikut adalah demo codepen cepat: Animasi dapat dilihat pada mana -mana penyemak imbas, namun pelekat hanya diberikan di Firefox:

Lihat top Mask SVG Animate pada elemen HTML oleh SitePoint (@SitePoint) pada codepen.

Berita baiknya ialah, jika anda menggunakan topeng SVG anda pada grafik SVG, sokongan penyemak imbas dengan segera. Lihat demo animasi yang sama hanya menggunakan SVG:

Lihat Pena Animasi SVG Animasi pada Elemen SVG oleh SitePoint (@SitePoint) pada Codepen.

sokongan penyemak imbas untuk harta topeng

Saya telah menyentuh isu sokongan penyemak imbas sepanjang artikel ini. Pecahan mudah keadaan pada masa penulisan kelihatan seperti ini:

• PNG atau topeng imej SVG luaran pada elemen HTML menggunakan kerja harta topeng CSS pada penyemak imbas webkit hanya dengan awalan -webkit- vendor.
• elemen topeng SVG inline pada elemen HTML disokong hanya di Firefox.
• elemen topeng SVG inline pada elemen SVG disokong dalam pelayar WebKit, serta Firefox dan Internet Explorer terkini.

Demo Codepen hebat ini oleh Yoksel menawarkan ilustrasi visual keadaan seni sejauh sokongan penyemak imbas pergi.

Alan Greenblatt menyediakan repositori github di mana dia masuk ke dalam butiran yang mana harta berkaitan grafik CSS disokong oleh pelayar yang mana.

Jadual Keserasian Sokongan Penyemak imbas di laman web Can I menggunakan maklumat lanjut dan pautan ke lebih banyak sumber.

Walaupun sokongan penyemak imbas semasa untuk topeng CSS tidak bagus, jika anda menggunakan ciri ini sebagai peningkatan pada beberapa elemen hiasan, pengguna penyemak imbas yang tidak disokong tidak akan menyedari bahawa mereka hilang.

Akhirnya, memohon kesan pelekat pada grafik SVG dengan elemen SVG menikmati sokongan terluas pada penyemak imbas moden dan kelihatan hebat di web.

Sumber

• modul masking CSS Tahap 1 - Draf editor W3C
• Keratan dan pelekat dalam CSS pada CSS-Tricks
• codrops css rujukan pada pelekat dengan mask-image
• svg pada mdn
• SVG Masks oleh Jakob Jenkov
• CSS Masking oleh Dirk Schulze.

Adakah anda tahu kesan pelekat yang sejuk di web yang ingin anda kongsi? Tekan kotak komen dan beritahu saya.

Soalan Lazim (Soalan Lazim) pada CSS dan SVG Masking

Apakah perbezaan antara CSS dan SVG Masking?

CSS dan SVG Masking kedua -duanya membolehkan anda menyembunyikan atau mendedahkan bahagian elemen. Walau bagaimanapun, mereka berbeza dalam pendekatan dan keupayaan mereka. CSS Masking menggunakan imej sebagai lapisan topeng di mana saluran alpha imej topeng menentukan keterlihatan elemen. Sebaliknya, SVG Masking menggunakan grafik vektor sebagai lapisan topeng, yang memberikan lebih banyak fleksibiliti dan kawalan ke atas bentuk dan saiz topeng. Masking SVG juga menyokong topeng warna dan kecerunan, yang tidak mungkin dengan masking CSS. Tambah kesan visual yang unik ke elemen web anda. Untuk membuat topeng kecerunan dengan SVG, anda perlu menentukan elemen lineevadient atau radialgradient di dalam elemen topeng. Unsur kecerunan harus mempunyai sekurang -kurangnya dua elemen berhenti yang menentukan warna dan kelegapan pada titik yang berbeza di sepanjang kecerunan. dan SVG menutup bersama untuk menghasilkan kesan pelekat yang kompleks. Anda boleh memohon topeng CSS ke elemen dan kemudian memohon topeng SVG ke elemen yang sama. Penglihatan akhir elemen ditentukan oleh gabungan dua topeng. Jika anda perlu menyokong Internet Explorer, anda harus menggunakan masking SVG sebaliknya. Masking SVG disokong dalam semua pelayar utama, termasuk Internet Explorer.

Bagaimana saya boleh menghidupkan topeng dengan CSS atau SVG? Untuk masking CSS, anda boleh menghidupkan harta imej topeng menggunakan animasi CSS atau peralihan. Untuk pelekat SVG, anda boleh menghidupkan elemen topeng menggunakan animasi SVG.

Bolehkah saya menggunakan teks sebagai topeng dengan CSS atau SVG? Untuk masking CSS, anda boleh menggunakan imej teks sebagai imej topeng. Untuk pelekat SVG, anda boleh menggunakan elemen teks sebagai elemen topeng. Fungsi gradien radial sebagai imej topeng. Untuk membuat topeng bulat dengan SVG, anda boleh menggunakan elemen bulatan sebagai elemen topeng.

Bagaimana saya boleh membuat topeng kompleks dengan pelbagai bentuk? , Anda boleh menggunakan masking SVG. SVG Masking membolehkan anda menggunakan pelbagai elemen bentuk (seperti Rect, Circle, Polygon, dan lain -lain) sebagai elemen topeng. Anda boleh meletakkan dan saiz bentuk ini secara bebas untuk membuat topeng kompleks.

Bolehkah saya menggunakan video sebagai topeng dengan CSS atau SVG?

Masking CSS menyokong topeng video. Anda boleh menggunakan video sebagai imej topeng dengan menetapkan harta imej topeng ke url video. Masking SVG tidak menyokong topeng video.

Bagaimana saya boleh menyesuaikan kelegapan topeng dengan CSS atau SVG?

imej topeng. Anda boleh menyesuaikan kelegapan dengan mengedit imej topeng. Untuk pelindung SVG, kelegapan topeng ditentukan oleh sifat-sifat opacity dan stroke-opacity unsur topeng. Anda boleh menyesuaikan kelegapan dengan menukar sifat -sifat ini.

Atas ialah kandungan terperinci Masking dalam penyemak imbas dengan CSS dan SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!