Masca-imagine - CSS-Tricks | Almanah CSS 2025

A maskdin CSS ascunde o parte a elementului la care se aplică.

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

Să presupunem că aveți un element cu un fundal fotografic și un grafic SVG alb-negru pe care să îl folosiți ca mască, astfel:

Puteți seta imaginea ca a background-imageși masca ca a mask-imagepe același element și să obțineți așa ceva:

Măștile împărtășesc multe lucruri în comun cu fundalurile prin faptul că le puteți dimensiona, poziționa și repeta, la fel ca fundalurile. Vezi mai jos proprietățile aferente. Dar iată un alt lucru interesant despre măștile pe care le împărtășesc cu mediile: pot fi degrade.

Iată aceeași grafică de fundal, doar cu o linear-gradientmască care o acoperă, ceea ce face ca partea de sus transparentă să se estompeze de jos, care nu este deloc transparentă:

Acest lucru funcționează pentru că partea de sus a linear-gradienteste transparent. Aș fi presupus că ar funcționa dacă ar fi la whitefel de bine atât timp cât a mask-typefost luminance, dar asta nu pare să funcționeze în niciun browser pentru mine.

Apropo de luminancemăști, asta nu pare să funcționeze pentru imagini ca măști care sunt un format raster ca JPG.webp sau PNG pentru mine. Actualizare : cititorul Micheal Hall scrie cu o demonstrație în care ar putea avea ceva de-a face cu utilizarea proprietăților cu mâna lungă. Firefox pare să sprijine acest concept dacă utilizați doar stenograma.

Dar măștile alfa par să funcționeze foarte bine. Ca și în graficele raster care utilizează transparența alfa reală. Ca aceasta:

Și doar pentru a demonstra un punct, o animație color pe care o puteți vedea prin mască:

mask-imageProprietatea poate fi , de asemenea , utilizate direct în interiorul elementelor SVG. De asemenea, verificați această mască eliptică care are și un filtru neclar:

Se pare că ai putea să înșeli masca SVG și să o aplici la alte elemente, mask-image: url(#mask);dar nu găsesc că funcționează de fapt. Funcționează numai în SVG și are un efect secundar urât de a șterge în totalitate o imagine dacă este utilizată în afara SVG.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.