更改 CSS 幻灯片的背景

Question

为了设计我的页面布局，我使用了这个例子：

http://www.designmadeingermany.de/slideshow/#a1

http://jsfiddle.net/nimbu/KEqSF/?utm_source=website&utm_medium=embed&utm_campaign=KEqSF

我试图让每张幻灯片都有不同的背景，这样当幻灯片动画出现时，每张幻灯片都会显示不同的背景。目前我可以为第一张幻灯片设置 1 个背景，但是添加的任何其他背景优先于此图像并且出现在之前的幻灯片上（2>>1 和 3>>2>>1），所以我只能设置单一背景。我已尝试更改每张幻灯片的背景图片：

#i1 { background-image: url("images/bg1.jpg") no-repeat center center fixed;}
#i2 { background-image: url("images/bg2.jpg") no-repeat center center fixed;}
#i3 { background-image: url("images/bg3.jpg") no-repeat center center fixed;}

但这不起作用。我还尝试为每张幻灯片添加图像并将它们设置为背景图像：

<!-- First Page #a1 -->
            <div id="i1" class="page">
                    <img src ="images/bg1.jpg" id="bg" alt="">
<!-- Second Page #a2 -->
            <div id="i2" class="page">
                    <img src ="images/bg2.jpg" id="bg" alt="">
<!-- Third Page #a3 -->
            <div id="i3" class="page">
                    <img src ="images/bg1.jpg" id="bg" alt="">

使用 css:

img {
max-width: 100%;
}

#bg { position: fixed;
z-index: 0;
top: 0;
left: 0; }

.bgwidth { width: 100%; }
.bgheight { height: 100%; }

然而这也给了我一个类似的错误。我不确定我还能如何做到这一点，我目前正在学习 CSS/HTML 所以任何帮助都将不胜感激！提前致谢！！！

编辑：我现在的jsfiddle在评论里（只能post1link）。如您所见，我正在尝试为联系人幻灯片显示不同的背景。画廊幻灯片完成了它的工作，应该保持纯色。我在这里根本没有成功！

Answer 1

看看这个 fiddle：http://jsfiddle.net/6j1hav7x/

我使用“background”而不是“background-image”重写了您的代码：

#i1 { background: url("http://lorempixel.com/800/600/sports") no-repeat center center fixed;}
#i2 { background: url("http://lorempixel.com/800/600/abstract") no-repeat center center fixed;}
#i3 { background: url("http://lorempixel.com/800/600/animals") no-repeat center center fixed;}

（您的语法对于 background-image 不正确，但对于 background 是正确的）

更改 CSS 幻灯片的背景

Changing backgrounds for CSS slideshow

html

css

background

slideshow