Question

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

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

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

我试图让每张幻灯片都有不同的背景，这样当幻灯片动画发生时，每张幻灯片会显示不同的背景。目前我能够为第一张幻灯片设置1个背景，但添加的任何其他背景优先于此图像并且在幻灯片之前存在（2>＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt; 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，所以任何帮助都表示赞赏！在此先感谢!!!

编辑：我当前的js小提琴是在评论中（只能发布1个链接）。正如您所看到的，我正在尝试为联系人幻灯片显示不同的背景。画廊幻灯片完成其工作，应保持纯色。我根本没有成功！

Answer 1

看看这个小提琴：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幻灯片的背景

1 个答案: