Question

我有一个标题，背景在两个图像之间进行动画处理。

header {
    margin-top: 80px; /* navbar height */
    padding-top: 60px !important;
    padding-bottom: 50px !important;
    background: rgba(255,215,0,1) !important;
    background-size: cover;
    /*
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;*/
    -webkit-animation: animation-home-background 15000ms infinite;
    -moz-animation: animation-home-background 15000ms infinite;
    -o-animation: animation-home-background 15000ms infinite;
    animation: animation-home-background 15000ms infinite;
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    animation-delay: 1s;
}
@-webkit-keyframes animation-home-background {
    25%    {background-image: url("../img/header/h2.jpg"); }
    50%   {background-image: url("../img/header/h1.jpg"); }
    100%  {background-image: url("../img/header/h2.jpg"); }
}
@keyframes animation-home-background {
    25%    {background-image: url("../img/header/h2.jpg"); }
    50%   {background-image: url("../img/header/h1.jpg"); }
    100%  {background-image: url("../img/header/h2.jpg"); }
}

现在第一张图片突然出现了。如何确保第一张图像从黄色背景颜色平滑淡入？

Answer 1

由于您使用了与项目相关的图片的代码路径，因此我无法完全理解您的需求。

即便如此，我在JSFiddle中开发了一个原型，用颜色替换你的图像并切断所有＆＃34;！important＆＃34;。

header {
    width: 100%;
    height: 100px;
    background: blue;
    -webkit-animation: animation-home-background 15000ms infinite;
    -moz-animation: animation-home-background 15000ms infinite;
    -o-animation: animation-home-background 15000ms infinite;
    animation: animation-home-background 15000ms infinite;
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    animation-delay: 1s;
}
@-webkit-keyframes animation-home-background {
    25%    {background: red; }
    50%   {background: blue; }
    100%  {background: red; }
}
@keyframes animation-home-background {
    25%    {background: red; }
    50%   {background: blue; }
    100%  {background: red; }
}

https://jsfiddle.net/xj9t62a2/

使用＆＃34;！重要＆＃34;是一种不好的做法，可以为你带来更复杂的问题。

如何淡出第一张背景图片？

1 个答案: