在背景图像顶部淡入淡出幻灯片，作为页面背景

Question

我的网站目前有一个大的静态图像作为背景图像。我想在背景图像上方添加一个由 3 个图像组成的循环幻灯片，但仍位于其他所有图像下方。幻灯片图像只是不同大小的白色 png，具有部分透明度，并且应该平滑地相互淡入淡出。预期效果是持续突出显示背景图像的不同区域（页面的其余部分将不受影响）。

我必须在 CSS 文件中添加什么才能将幻灯片置于背景图像上方但位于其他所有内容下方？目前，对于我拥有的单个图像：

body {
background-color: #000000;
background-image:url('/images/wallpaper.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top center;
color: #555; 
font: 70%/1.5  Verdana, 'Trebuchet MS', arial, sans-serif;
text-align: center; 
margin: 15px 0;
}

我找到了一个 jQuery 应用程序 (Innerfade) 对于淡入淡出的图像，我是否需要在页面正文中添加任何内容才能运行它，或者一切都可以通过 CSS 运行吗？

感谢您的帮助！

Answer 1

您需要使用不同的 z 索引来定位元素。
例如，

#slideshow{
position: relative;
z-index: 1;
}

#otherContent{
position: relative;
z-index: 2
}

z-index 需要该位置才能发挥作用。
现在，幻灯片的 z-index（空间深度）与其他内容相比较低。

希望这有帮助。