背景幻灯片放映野生动物园

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>

背景幻灯片放映野生动物园

Background slide show safari

html

css

safari

keyframe

css-animations