我遇到了我的背景交叉淡化问题，但不工作。也许有人会告诉我我做错了什么？ :) 这里的脚本：CSS背景交叉淡化问题

HTML：

<div class="bg"> 
    <div class="backgroundchange"> 
     <div class="bgimg" id="bg1"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="bgimg" id="bg2"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="bgimg" id="bg3"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

#bg1 { 
    background-image: url("../img/gallery/slonecz.jpg"); 
} 

#bg2 { 
    background-image: url("../img/gallery/motyl.jpg"); 
} 

#bg3 { 
    background-image: url("../img/gallery/slonecz.jpg"); 
} 

@keyframes backgroundchangeFadeInOut { 
    0% { 
     opacity: 1; 
    } 

    17% { 
     opacity: 1; 
    } 

    25% { 
     opacity: 0; 
    } 

    92% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

@-webkit-keyframes backgroundchangeFadeInOut { 
    0% { 
     opacity: 1; 
    } 

    17% { 
     opacity: 1; 
    } 

    25% { 
     opacity: 0; 
    } 

    92% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

#backgroundchange div:nth-of-type(1) { 
    animation-delay: 8s; 
    -webkit-animation-delay: 8s; 
} 

#backgroundchange div:nth-of-type(2) { 
    animation-delay: 6s; 
    -webkit-animation-delay: 6s; 
} 

#backgroundchange div:nth-of-type(3) { 
    animation-delay: 4s; 
    -webkit-animation-delay: 4s; 
} 

#backgroundchange div { 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 
}

结果，我可以看到第一个背景设定，但它永远不会交叉渐变成下一个。

来源

2017-01-07 Damian Doman

Banzay的答案实际上使其工作太棒了！ –

您的JavaScript逻辑和控制流程在哪里处理功能？ HTML和CSS本身不足以满足HTML5/CSS/JavaScript的真实动态可能性。编辑，以防我的微妙之处不够清楚：您的HTML/CSS组合缺少第三个关键部分，使其成为动态HTML5：JavaScript！ –

耶路撒冷，我知道JS实际上使它更容易达到这个目的，但我仍然需要在CSS中这样做，因为这种风格也会应用于其他元素。感谢您的评论/回答寿！ –

你想不服这样吗？

这里是我的笔记本电脑工作的代码：

CSS：

.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url("../img/gallery/slonecz.jpg"); 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 
} 

@keyframes backgroundchangeFadeInOut { 
    0% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    50% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    100% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
}

HTML：

<div class="bg"> 
    <div class="backgroundchange"> 
     <div class="bgimg" id="bg1"> 
      <div class="title centerV"> 
       <div> 
        <div class="text"> 
         <h1>Malarstwo</h1> 
         <p>Beaty Domanskiej</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2017-01-07 14:54:50 Banzay

首页实际上看起来像这样：https://s29.postimg.org/abjplgptj/example.jpg我想让背景图像通过无限循环淡入另一个。当我运行你的代码片段时，它只是每隔几秒就闪烁一次，所以不确定它是否有效，试图在一秒内将它实现到我的代码中 –

我改变了答案。看看 – Banzay

哇，你是一个编码赛车哈哈哈，我已经半途而废了，当你发布这个答案：P –

如果不设置css @keyframe，则无法设置动画。

关键帧添加到您的所有动画这里是下面一个例子：

@-webkit-keyframes backgroundchangeFadeInOut{ 
      0% {transform: translateY(-100%); opacity: 0;} 
      80% {transform: translateY(40%);} 
      100% {transform: translateY(0%); opacity: 1;} 
     }

来源

2017-01-07 14:45:52

已经设置了几个关键帧，也实现了你提供的那个，但仍然没有效果，想知道我在哪里犯了一个错误。纠正我，如果我即使错了 - 我可以把任何关键帧代码放入我的css文件，它不需要在它涉及的样式之后正确吗？ –

CSS背景交叉淡化问题

回答

CSS：

HTML：

相关问题