Kaukė-vaizdas - CSS-gudrybės | CSS almanachas 2025

A maskCSS slepia dalį elemento, kuriam taikoma.

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

Tarkime, kad turite elementą su fotografiniu fonu ir nespalvotą SVG grafiką, kurį naudosite kaip kaukę:

Galite nustatyti vaizdą kaip background-imageir kaukę kaip mask-imagetą patį elementą ir gauti kažką panašaus į šį:

Kaukės turi daug bendro su fonais, nes jūs galite jas keisti, išdėstyti ir pakartoti panašiai kaip fonai. Žemiau žiūrėkite susijusias savybes. Bet čia yra dar vienas įdomus dalykas, susijęs su kaukėmis, kuriomis jie dalijasi su kilme: jie gali būti gradientai.

Čia yra tas pats fono paveikslėlis, tik su linear-gradientjį dengiančia kauke, dėl kurios viršutinė dalis tampa skaidri, o apačia - visiškai neskaidrus:

Tai veikia, nes viršuje linear-gradientyra transparent. Aš būčiau manęs, kad jis veiks, jei jis bus whitetoks pat ilgas, kaip ir mask-typeanksčiau luminance, bet neatrodo, kad man tai veiktų jokioje naršyklėje.

Kalbant apie luminancekaukes, atrodo, kad tai netinka vaizdams kaip kaukėms, kurios man yra rastro formato, pavyzdžiui, JPG.webp ar PNG. Atnaujinimas : skaitytojas Michealas Hallas parašo demonstracinę versiją, kur tai gali būti susiję su ilgų rankų savybių naudojimu. Panašu, kad „Firefox“ palaiko šią koncepciją, jei naudojate tik trumpinį.

Tačiau alfa kaukės, atrodo, veikia puikiai. Kaip ir rastrinėje grafikoje, kurioje naudojamas tikras alfa skaidrumas. Kaip šitas:

Ir tik tam, kad įrodytumėte tašką, spalvinę animaciją, kurią galite pamatyti per kaukę:

Ši mask-imagesavybė taip pat gali būti naudojama tiesiogiai SVG elementuose. Patikrinkite šią elipsinę kaukę, kurios filtras taip pat yra neryškus:

Panašu, kad jūs galite užklupti tą SVG kaukę ir pritaikyti ją kitiems elementams, mask-image: url(#mask);tačiau nemanau, kad tai iš tikrųjų veikia. Tai veikia tik SVG, ir turi nemalonų šalutinį poveikį, kai vaizdas visiškai ištrinamas, jei jis naudojamas už SVG ribų.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.