视差图像不适用于野生动物园

Question

这是我的视差图像代码

body,html{
height:100%;
}

.booking {
    margin-top: 60px;

    background-image: url(http://via.placeholder.com/1000x800);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 50px;
}

.gray1 {
    background: #252525;
}

.opacity-fl1 {
    position: absolute;
    width: 100%;
    opacity: 0.8;
    padding-bottom: 244px;

    padding-top: -200px;
    margin-top: -50px;
}

<section class="booking">
 <div class="opacity-fl1 gray1"></div>
<h1>Hello world</h1>

</section>

除了safari之外，它在所有浏览器中都运行良好（仅在safari中显示背景：＃252525正在显示）。有人可以解释一下这里有什么问题吗？

谢谢。

Answer 1

这对我有用，我只是添加了一张随机图片。也使用Safari。

body,html{
height:100%;
}

.booking {
    margin-top: 60px;

    background-image: url(http://via.placeholder.com/1000x800);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 50px;
}

.gray1 {
    background: #252525;
}

.opacity-fl1 {
    position: absolute;
    width: 100%;
    opacity: 0.8;
    padding-bottom: 244px;

    padding-top: -200px;
    margin-top: -50px;
}

<section class="booking">
 <div class="opacity-fl1 gray1"></div>
<h1>Hello world</h1>

</section>