Моя цель - иметь возможность использовать альфа-маску PNG для создания неровных краев внизу разделов / строк / контейнеров на веб-сайте.
Поскольку строки могут быть любой высоты, мне нужно применить тонкое изображение маски вдоль только одного края элемента, и при этом показать все, что находится выше точки, в которой начинается маска. .
Мне удалось добиться этого в Safari, наложив на слои две маски: linear-gradient (черный ›черный), чтобы покрыть любую высоту контейнера, плюс альфа-полосу PNG высотой 66 пикселей для нижнего края контейнера, а затем установив -webkit-mask-composite: destination-atop - это эффективно переворачивает маску, позволяя просвечивать все, что находится выше PNG, и маскировать только нижний рваный край.
Вот код, который заставляет это работать в настольном браузере Safari:
-webkit-mask: url("mask.png") 0 0/100%, linear-gradient(black, black);
-webkit-mask-composite: destination-atop;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: bottom left;
Вы можете увидеть, как это работает в настольном браузере Safari на белой панели навигации на этом (test / dev) сайте здесь: https://wesleyd14.sg-host.com
К сожалению, похоже, что -webkit-mask-composite: destination-atop не поддерживается в Chrome, а mask-composite не имеет эквивалентного значения для Firefox.
Кто-нибудь знает другой метод, который выполнит то же самое, то есть применение маски только вдоль одного края контейнера, , при этом позволяя всему ВНЕ маски оставаться немаскированным? < / em>
