Topeng-gambar - Trik CSS | CSS Almanac 2025

A maskdalam CSS menyembunyikan bahagian elemen yang digunakan.

.el ( mask-image: url(star.svg); )

Katakan anda mempunyai elemen dengan latar belakang fotografi, dan grafik SVG hitam-putih untuk digunakan sebagai topeng, seperti ini:

Anda boleh menetapkan gambar sebagai background-imagedan topeng sebagai mask-imageelemen yang sama, dan mendapatkan sesuatu seperti ini:

Topeng mempunyai banyak persamaan dengan latar belakang kerana anda boleh mengukurnya, meletakkannya, dan mengulanginya dan seperti latar belakang. Lihat sifat berkaitan di bawah. Tetapi inilah satu lagi perkara menarik mengenai topeng yang mereka kongsi dengan latar belakang: ia boleh menjadi kecerunan.

Inilah grafik latar belakang yang sama, hanya dengan linear-gradienttopeng yang menutupnya, yang menjadikan bahagian atas transparan memudar ke bawah yang sama sekali tidak telus:

Ini berfungsi kerana bahagian atasnya linear-gradientadalah transparent. Saya akan menganggap ia akan berfungsi jika ia whiteserta selagi mask-typeitu luminance, tetapi itu seolah-olah tidak bekerja di mana-mana pelayar untuk saya.

Bercakap tentang luminancetopeng, nampaknya tidak berfungsi untuk topeng gambar seperti format raster seperti JPG.webp atau PNG untuk saya. Kemas kini : Pembaca Micheal Hall menulis dengan demo di mana ia mungkin ada kaitan dengan menggunakan sifat lama. Firefox nampaknya menyokong konsep ini jika anda hanya menggunakan jalan pintas.

Tetapi topeng alpha nampaknya berfungsi dengan baik. Seperti dalam grafik raster yang menggunakan ketelusan alpha sebenar. Seperti ini:

Dan hanya untuk membuktikan satu titik, animasi warna yang dapat anda lihat melalui topeng:

Tempat mask-imagepenginapan ini juga dapat digunakan secara langsung di dalam elemen SVG. Seperti periksa topeng elips ini yang juga mempunyai penapis kabur:

Nampaknya anda dapat memasukkan topeng SVG itu dan menggunakannya pada elemen lain mask-image: url(#mask);tetapi saya tidak dapati ia berfungsi. Ia hanya berfungsi di dalam SVG, dan mempunyai kesan sampingan yang buruk daripada menghapus gambar sepenuhnya jika digunakan di luar SVG.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.