背景幻灯片野生动物园

Question

所以我创建了一个网页幻灯片，和正常工作的Chrome，但出于某种原因，在其Safari浏览器只显示一个渐变背景，但没有图像显示。

#hero-image{ 
    background-size:cover; 
    -webkit-background-size: cover; 
    background-repeat: no-repeat; 
    -moz-animation: slide 15s infinite; 
    -o-animation: slide 15s infinite; 
    animation: slide 15s infinite; 
    -webkit-animation: slide 15s infinite; /* Safari 4.0 - 8.0 */ 

    #front-search-box{ 
     color:white; 
     position:absolute; 
     background-color:transparent; 
    } 
} 



@-webkit-keyframes slide { 
    0% { 

     background: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
     background: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

@-moz-keyframes slide{ 
    0% { 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

@-o-keyframes slide{ 
    0% { 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

@keyframes slide{ 
    0% { 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

Answer 1

Safari浏览器需要有一个默认background-image属性集，以便能够在关键帧动画以动画它。但要小心，这个浏览器真的在图像状态之间做动画（缩小+不透明度转换）。

另外，如果在你的问题粘贴代码是CSS，请注意，这是语法不正确嵌套的声明像你#front-search-box一样。

最后，请注意，如果您在动画中设置了background属性，它将重置您之前可能设置的所有更精确的规则（例如background-cover）。由于此处您只是更改图像，请使用background-image属性。

更新的示例没有提供所有过期供应商的前缀。

#hero-image { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    background-repeat: no-repeat; 
 
    animation: slide 15s infinite; 
 
    /* we need to set the default here for safari */ 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("aaa.png"); 
 
} 
 

 
@keyframes slide { 
 
    0% { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg"); 
 
    } 
 
    50% { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"); 
 
    } 
 
    100% { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("https://upload.wikimedia.org/wikipedia/commons/d/dd/Heptagon_pavilion%2C_HK_%26_Kln_Fuk_Tak_Buddhist_Association.JPG"); 
 
    } 
 
}

<div id="hero-image"></div>