Маска-изображение - CSS-трикове

A maskв CSS скрива част от елемента, към който се прилага.

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

Да кажем, че сте имали елемент с фотографски фон и черно-бяла SVG графика, която да използвате като маска, като тази:

Можете да зададете изображението като a background-imageи маската като a mask-imageна един и същ елемент и да получите нещо подобно:

Маските споделят много общо с фона, тъй като можете да ги оразмерите, да ги позиционирате и да ги повтаряте, подобни на фона. Вижте свързаните свойства по-долу. Но тук има още едно интересно нещо за маските, което те споделят с фонове: те могат да бъдат градиенти.

Ето същата фонова графика, само с linear-gradientмаска, която я покрива, което прави горната част прозрачна, избледняваща долната, която изобщо не е прозрачна:

Това работи, защото горната част на linear-gradientе transparent. Бих предположил, че ще работи, ако беше whiteтолкова дълго, колкото mask-typeбеше luminance, но това изглежда не работи в нито един браузър за мен.

Говорейки за luminanceмаски, това изглежда не работи за изображения като маски, които са растерни формати като JPG.webp или PNG за мен. Актуализация : Reader Micheal Hall пише с демонстрация, където може да има нещо общо с използването на свойствата на дългата ръка. Firefox изглежда поддържа тази концепция, ако използвате само стенографията.

Но алфа маските изглежда работят добре. Както при растерните графики, които използват действителната алфа прозрачност. Като този:

И само за да докажете точка, цветна анимация, която можете да видите през маската:

В mask-imageимота може да се използва директно в SVG елементи. Подобно на разглеждане на тази елипсовидна маска, която също има размазан филтър:

Изглежда, че бихте могли да хванете тази SVG маска и да я приложите към други елементи с, mask-image: url(#mask);но не намирам, че всъщност работи. Той работи само в SVG и има неприятен страничен ефект от изтриване на изображение изцяло, ако се използва извън SVG.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.