1.在同一个div中,编写如下图所示的一段代码,并在这段代码中设置dive的宽度和高度,以便文本具有特定的范围。
2.找到背景,如下图所示,添加背景后的图像作为背景图案。
3.在后台添加url()。为了连接图像,在url中写入背景图像的路径。
4.你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。
5.这样,保存后的文本将覆盖在图片的顶部。
方法:设置div样式z-index
:auto
auto可定义为一个值(整数数字),越大代表越置前,如可定义为:
z-index:999。
前提是div是定位元素。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#side-clients ul{
padding-top:35px
margin-right:-15px
}
.hoverbox .preview
{
border-color: #000
width: 302px
height: 302px
position: absolute
z-index: 0
}
.hoverbox a .preview
{
display: none
}
#side-clients li:hover .preview
{
display: block
position: absolute
top: -4px
left: -5px
z-index: 100
}
#side-clients li:hover{ z-index:2 }
#side-clients li{
position:relative
width:40px
height:40px
z-index: 0
border:1px solid #e9e9e9
opacity:.9
margin:0 10px 10px 0
padding:4px
float:left
display:block
color: inherit
background: #eee
border-color: #ddd #bbb #aaa #ccc
border-style: solid
border-width: 0px
color: inherit
}
</style>
</head>
<body>
<div id="side-clients">
<ul class="hoverbox">
<li><a href="##"><img src="images/footer_logo.png" alt="" height="40" width="40"/><img src="images/footer_logo.png" alt="" class="preview" /></a></li>
<li><a href="##"><img src="images/1111.png" alt="" height="40" width="40"/><img src="images/1111.png" alt="" class="preview" /></a></li>
<li><a href="##"><img src="images/a_zhuanti_bg.png" alt="" height="40" width="40"/><img src="images/a_zhuanti_bg.png" alt="" class="preview" /></a></li>
</ul>
</div>
</body>
</html>导致的原因应该是父元素是同一级,同一级元素后面的元素在上层,子元素设置再大的z-index也不会覆盖父元素吧。