CSS背景交叉淡化问题 [英] CSS Background crossfading issue
本文介绍了CSS背景交叉淡化问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到的问题是我的后台交叉淡化不能正常工作。
也许有人可以告诉我,我做错了什么? :)
这是脚本:
i'm experiencing an issue with my background crossfading not working AT ALL. Maybe someone would be able to tell me what have i done wrong? :) Here's the script:
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;
}
因此,我可以看到第一个背景设置,但它从不交叉淡入淡出进入下一个。
As a result, i can see the first background set, but it never crossfades into the next one.
推荐答案
你想要这样吗?
这是一个适用于我的笔记本电脑的代码:
Here is a code that works on my laptop:
.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:
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>
这篇关于CSS背景交叉淡化问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文