背景图片幻灯片问题 [英] background image slide show issue
本文介绍了背景图片幻灯片问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在以下源代码中，内容区域显示在背景图像下方，但我希望内容区域显示在背景图像中。怎么做？
以下是我的源代码：
Hi,
In the following source code,the content area is displayed below the background image but i want the content area to be displayed inside the background image .how to do it?
Following is my source code:
<!DOCTYPE HTML>
<html>
<head>
<title>SlideShow</title>
<style>
#wrapper {width: 900px; margin:0 auto; background-color:#00FF00;
}
#container {
height:auto;
margin:0 auto;
padding:0 0 20px;
width:751px;
background-color:#00FFFF;}
#slideshow img {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
box-shadow: 2px 2px 5px #888888;
}
</style>
<script>
var image1 = new Image();
image1.src ="Images/first.jpg";
var image2 = new Image();
image2.src = "Images/second.jpg";
</script>
</head>
<body>
<div id="wrapper">
<div id="slideshow">
<img src="Images/first.jpg" alt="" name="MySlide" width=900; height=200 />
<div id="container" style="height: 104px">
<h1>It is the Content Area</h1>
</div>
</div>
</div>
<script>
var step=1
function SlideShow()
{
if(!document.images)
return
document.images.MySlide.src=eval("image"+step+".src")
if(step<4)
step++
else
step=1
setTimeout("SlideShow()",3000)
}
SlideShow()
</script>
</body>
</html>
推荐答案
如果你想把你的背景图像作为幻灯片放映，那么你需要在你的css文件中包含该元素的z-index属性。
所以在你的情况下，它应该像 - >
If you want to place your background images as a slideshow, then you need to have the z-index property of that element inside your css file.
So in your case, it should be like ->
#slideshow {
position: absolute;
z-index: -99999px;
}
希望这有助于你。
Hope This Helps You.
这篇关于背景图片幻灯片问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
