Question

我试图暗含掩盖效果以在各部分之间过渡。在案例研究部分中查看此处在桌面上的效果

http://coolaid-dont-use.webflow.io/

我在移动设备上遇到问题。我在iPhone Safari上尝试了以下代码。在iphone Safari上，当您单击每个部分时，当您单击每个不同的案例研究时，它会针对错误的部分，它将转到错误的页面。在android chrome上根本不起作用。

 <style>
.portfolio-clip {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .portfolio-clip {
        clip: rect(0, auto, auto, 0);
        -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
    }
}

.c-portfolio-section__text {
    position: fixed;
    top: 32%;
}
</style>
<div class="c-portfolio-section is--dockside">
    <div class="c-portfolio-media is--dockside-media">
        <div class="portfolio-clip">
            <div class="c-portfolio-section__text">
                <h3 class="h3-portfolio-subheading">DOCKSIDE</h3>
                <h3 class="h3-profolio-heading">A Unique <br>Event<br>Destination</h3><a href="/case-studies/dockside" class="h3-portfolio-subheading is--link">Case Study</a></div>
        </div>
    </div>
</div>

有人对更好的解决方案或如何进行调整有任何建议吗？

让我知道您是否需要任何澄清？

谢谢，大卫

使用-webkit-mask-image单击以屏蔽文本

0 个答案: