Html 使用 css3 自动更改背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25789673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing background images automatically by using css3
提问by sana
I am trying to change background images automatically by using css3. I have 9 images to change in background. The problem I am facing is, it displays only first and last image in sliding but not the 2, 3, 4, 5, 6, 7, 8. I have following code:
我正在尝试使用 css3 自动更改背景图像。我有 9 张图片要在背景中更改。我面临的问题是，它只显示第一个和最后一个滑动图像，而不是 2、3、4、5、6、7、8。我有以下代码：
<img id="img1" src="images/1.gif">
<img id="img2" src="images/2.gif">
<img id="img3" src="images/3.gif">
<img id="img4" src="images/4.gif">
<img id="img5" src="images/5.gif">
<img id="img6" src="images/6.gif">
<img id="img7" src="images/7.gif">
<img id="img8" src="images/8.gif">
<img id="img9" src="images/9.gif">
and here is the CSS:
这是CSS：
#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9 {
width:610px;
height:610px;
position:scroll;
z-index:-1;
animation-name: test;
animation-duration: 90s;
opacity:0;
}
#img2 {
animation-delay:10s;
-webkit-animation-delay:10s
}
#img3 {
animation-delay:20s;
-webkit-animation-delay:20s
}
#img4 {
animation-delay:30s;
-webkit-animation-delay:30s
}
#img5 {
animation-delay:40s;
-webkit-animation-delay:40s
}
#img6 {
animation-delay:50s;
-webkit-animation-delay:50s
}
#img7 {
animation-delay:60s;
-webkit-animation-delay:60s
}
#img8 {
animation-delay:70s;
-webkit-animation-delay:70s
}
#img9 {
animation-delay:80s;
-webkit-animation-delay:80s
}
@-webkit-keyframes test {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes test {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
The time of delay for each slide from 1 to 8 is 10s except image9, which has delay time 8.60s.
每张幻灯片从 1 到 8 的延迟时间为 10 秒，但 image9 的延迟时间为 8.60 秒。
Please help where I am going wrong. :(
请帮助我哪里出错了。:(
回答by Lee
Okay I have made a JS Fiddle, and I think i've come up with what you want.
好的，我已经制作了一个 JS Fiddle，我想我已经想出了你想要的东西。
http://jsfiddle.net/d48vdxmv/2/
http://jsfiddle.net/d48vdxmv/2/
Basically, you need to wrap your images in a container first:
基本上，您需要先将图像包装在容器中：
<div id="container">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_03.jpg">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_04.jpg">
</div>
Then in the CSS, set the container to be relative position, and the images to be absolute so they stack ontop of each other.
然后在 CSS 中，将容器设置为相对位置，将图像设置为绝对位置，以便它们彼此堆叠。
#container {
position:relative;
height:610px;
width:610px;
}
#container img {
position:absolute;
left:0;
}
Then add your keyframes, with the different browser variations
然后添加您的关键帧，使用不同的浏览器变体
@-webkit-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
Then your animation details for all browsers
然后是所有浏览器的动画详细信息
#container img {
-webkit-animation-name: imgFade;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: imgFade;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: imgFade;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: imgFade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
And finally your duration times for each image
最后是每个图像的持续时间
#container img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#container img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#container img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#container img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
