css - 如何减慢背景图片的滚动速度

Question

我想制作视差效果但我尝试了很多方法仍然无法做到

.top
{
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}


<div class="top">
    <div class="main">

        <ul class="nav">
            <li><a href="#">Menu</a></li>
            <li><a href="#">Limited Edition</a></li>
            <li><a href="#" class="account">Account</a></li>
        </ul>

    </div>
</div>

现在我有一半的视差效果，即背景图像是固定的，没有移动，下一张图像将覆盖前一张图像，但现在我希望它成为当我向下滚动时，背景图像也会向下移动但比原来的速度。

标签： csshtmlparallaxvertical-scrolling