CSS 图片最顶层定义

html-css028

CSS 图片最顶层定义,第1张

<!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也不会覆盖父元素吧。

1.在同一个div中,编写如下图所示的一段代码,并在这段代码中设置dive的宽度和高度,以便文本具有特定的范围。

2.找到背景,如下图所示,添加背景后的图像作为背景图案。

3.在后台添加url()。为了连接图像,在url中写入背景图像的路径。

4.你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。

5.这样,保存后的文本将覆盖在图片的顶部。

在html中让图片置顶,需要设置图片中的div属性,设定div中的padding-top属性。

padding-top: 0设置div中无填充,对象置顶。案例设置方法如下:

<html>

<body>

zhiding{padding-top: 0}

<div class=“zhiding” align="center">

<img src="C:路径/文件名.jpg">

</div>

</body>

</html>