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（空间深度）与另一个内容相同。

希望这有帮助。

在背景图象顶部的退色的幻灯节目，作为页背景

1 个答案: