Maszk-kép - CSS-trükkök | CSS Almanach 2025

A maskCSS elrejti az elem egy részét alkalmazzák.

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

Tegyük fel, hogy fényképészeti háttérrel és fekete-fehér SVG grafikával rendelkezik maszkként, például:

Beállíthatja a képet a background-imageés a maszkot mask-imagea ugyanazon elemre, és ilyet kaphat:

A maszkok sok közös vonást mutatnak a háttérrel, mivel méretezhetjük, elhelyezhetjük és megismételhetjük őket, és hasonlóan a háttérképekhez. Lásd a kapcsolódó tulajdonságokat alább. De itt van még egy érdekes dolog a maszkokról, amelyeket megosztanak a háttérrel: színátmenetek lehetnek.

Itt van ugyanaz a háttérgrafika, csak egy linear-gradientmaszk takarja, amely a felsőt átlátszóvá teszi, és az alja egyáltalán nem átlátszó:

Ez azért működik, mert a teteje linear-gradientvan transparent. Azt hittem volna, hogy működni fog, ha whiteugyanolyan jó, mint mask-typevolt luminance, de úgy tűnik, hogy ez egyetlen böngészőben sem működik számomra.

Ha a luminancemaszkokról van szó, úgy tűnik, hogy ez nem működik olyan képek maszkok esetében, amelyek raszteres formátumúak, például JPG.webp vagy PNG. Frissítés : Micheal Hall olvasó bemutat egy demóval, ahol köze lehet a hosszú kéz tulajdonságainak használatához. Úgy tűnik, hogy a Firefox támogatja ezt a koncepciót, ha csak a gyorsírást használja.

De úgy tűnik, hogy az alfa maszkok rendben működnek. Mint a raszteres grafikáknál, amelyek a tényleges alfa átlátszóságot használják. Mint ez:

És csak egy pont, egy színes animáció bizonyítására, amelyet a maszkon keresztül láthat:

A mask-imagetulajdonság közvetlenül felhasználható az SVG elemek belsejében is. Például nézze meg ezt az elliptikus maszkot, amelynek elmosódott szűrője van:

Úgy néz ki, mintha megragadhatná azt az SVG maszkot, és más elemekre is alkalmazhatná, mask-image: url(#mask);de nem találom, hogy ez valóban működik. Csak az SVG-n belül működik, és csúnya mellékhatása, hogy egy képet teljesen kitöröl, ha azt az SVG-n kívül használják.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.