视差图像不会在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>

它在所有的浏览器除了Safari浏览器工作正常（在Safari只有背景：＃252525是显示）。有人能解释我在这里有什么问题吗？

谢谢。

只是为了确保..使用逗号此背景图像：网址（ “../ IMG /迈阿密bg.jpg”） – Roy

没有运气！我也试过这个.. – aCSS

你可以做一个小提琴吗？或类似的东西？ – Roy

答

这是为我工作，我只是添加一个随机图片。也使用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>

也许你的图片链接有误 – RacoonOnMoon

不，在其他浏览器中，它的工作正常，除了Safari浏览器。目前我正在使用Windows操作系统，这可能是原因。 @Traver – aCSS

哦，好的。我在mac上使用safari。也许Windows操作系统是问题 – RacoonOnMoon

视差图像不会在Safari工作

相关推荐