Gambar-topeng - Trik CSS | CSS Almanak 2024

A maskdi CSS menyembunyikan bagian dari elemen yang diterapkan.

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

Katakanlah Anda memiliki elemen dengan latar belakang fotografi, dan grafik SVG hitam-putih untuk digunakan sebagai topeng, seperti ini:

Anda dapat mengatur gambar sebagai a background-imagedan mask sebagai mask-imageelemen yang sama, dan mendapatkan sesuatu seperti ini:

Masker memiliki banyak kesamaan dengan latar belakang di mana Anda dapat mengukurnya, memposisikannya, dan mengulanginya dan semacamnya seperti latar belakang. Lihat properti terkait di bawah. Tapi inilah hal menarik lainnya tentang topeng yang mereka bagikan dengan latar belakang: mereka bisa menjadi gradien.

Inilah grafik latar belakang yang sama, hanya dengan linear-gradienttopeng yang menutupinya, yang membuat bagian atas transparan memudar bagian bawah yang tidak transparan sama sekali:

Itu berfungsi karena bagian atas linear-gradientadalah transparent. Saya akan berasumsi itu akan berhasil jika itu whiteselama mask-typeitu luminance, tetapi tampaknya itu tidak berfungsi di browser apa pun untuk saya.

Berbicara tentang luminancetopeng, itu sepertinya tidak berfungsi untuk gambar-sebagai-topeng yang merupakan format raster seperti JPG.webp atau PNG bagi saya. Pembaruan : Pembaca Micheal Hall menulis dengan demo yang mungkin ada hubungannya dengan penggunaan properti long-hand. Firefox tampaknya mendukung konsep ini jika Anda hanya menggunakan steno.

Tapi topeng alfa tampaknya berfungsi dengan baik. Seperti pada grafik raster yang menggunakan transparansi alpha yang sebenarnya. Seperti ini:

Dan hanya untuk membuktikan suatu hal, animasi warna yang dapat Anda lihat melalui topeng:

The mask-imageproperti juga dapat digunakan secara langsung di dalam elemen SVG. Seperti lihat topeng elips ini yang juga memiliki filter buram:

Sepertinya Anda bisa mengambil topeng SVG itu dan menerapkannya ke elemen lain dengan mask-image: url(#mask);tetapi saya tidak menemukan itu benar-benar berfungsi. Ini hanya berfungsi dalam SVG, dan memiliki efek samping yang tidak menyenangkan karena sepenuhnya menghapus gambar jika digunakan di luar SVG.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.