我试图使2个背景图像逐渐消失,而在Chrome/Safari中正确工作时,我对Firefox没有运气。
html {
height: 100%;
background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
animation: slides 20s linear infinite;
-webkit-animation: slides 20s linear infinite;
-moz-animation: slides 20s linear infinite;
-o-animation: slides 20s linear infinite;
-ms-animation: slides 20s linear infinite;
}
@-moz-keyframes slides {
from {
-moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-moz-background-size: cover;
}
60% {
-moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
-moz-background-size: cover;
}
to {
-moz-background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-moz-background-size: cover;
}
}
@-webkit-keyframes slides {
from {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
60% {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
to {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
@keyframes slides {
from {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
background-size: cover;
}
60% {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
background-size: cover;
}
to {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
background-size: cover;
}
}
我尝试过将CSS内联并链接到外部样式表,但都没有起作用。任何指导都将不胜感激。谢谢!
动画背景图像不起作用的交叉浏览器,所以我建议您使用伪来实现这一目标。
html {
position: relative;
height: 100%;
background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
background-image: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-animation: slides 20s linear infinite;
-moz-animation: slides 20s linear infinite;
animation: slides 20s linear infinite;
}
@-webkit-keyframes slides {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes slides {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes slides {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
div.container {
position: relative; /* needed on all direct children */
background: white;
font-size: 24px;
padding: 30px;
}
<div class="container">
This content is not affected by the background animation
</div>
使用autoprefixer
,仅在左图中添加未装置的代码,并且为了最大程度地浏览器兼容性,请在页面底部的"小设置"框中添加> 0%
。
结果:
@-webkit-keyframes slides {
from {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
background-size: cover;
}
60% {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
background-size: cover;
}
to {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
background-size: cover;
}
}
@-moz-keyframes slides {
from {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-moz-background-size: cover;
background-size: cover;
}
60% {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
-moz-background-size: cover;
background-size: cover;
}
to {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-moz-background-size: cover;
background-size: cover;
}
}
@-o-keyframes slides {
from {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-o-background-size: cover;
background-size: cover;
}
60% {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
-o-background-size: cover;
background-size: cover;
}
to {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-o-background-size: cover;
background-size: cover;
}
}
@keyframes slides {
from {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
60% {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background2.jpg");
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
to {
background: url("http://web178.ocean.studiocoast.com.au/wp-content/uploads/2017/03/Background1.jpg");
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}