视差图像在 Safari 中不起作用

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>