如何用CSS样式控制文字浮于图片上方

html-css013

如何用CSS样式控制文字浮于图片上方,第1张

用CSS样式控制文字浮于图片上方，这个我们首先要明确的知道一个层的概念，这里就是将图片为一个层，然后文字又是一个层，然后我们使用一个position定位，将文字定于图片的位置，然后使用z-index这个层属性，来做，z-index的数值越大，层就越在上面，这里通过具体的代码来理解：

<html>

<head>

<style>

.headr{

width:300px

height:200px

border:1px

solid

#f00

z-index:100

}

.wenzi{

position:absoulte

left:100px

//只是假定的值，具体需测量

top:200px

z-index:101

z-index的数值越大，层就越在上面

}

</head>

<body>

<div

class="headr"

>

//页头

<img

src='图片的地址'>

</div>

<div

class='wenzi'>

<p>我会在图片的上面</p>

</div>

</body>

</html>

如果没判断错的话，备案那一块的css调用的应该是

body #ft .copyright .beian, body #ft .copyright .feedback { color: #737373font-family: Arial,SimSunmargin-left: 16pxpadding:0 16px 0 0background:url(../images/index_icon.png) 101px -131px no-repeat}

根据这段背景 background的写法判断，我估计备案的图标是整合在一个大图片上了，图片整合有好处也有坏处，我个人是不习惯整合的；你这里要修改的话，我给你几个修改方案：

1、background:url(../images/index_icon.png) 101px -131px no-repeat中的101px的数值改大一些，如果图片出现被隐藏一部分的情况，那么 padding:0 16px 0 0中padding-right的值也要改大一些；

2、直接把备案的这个图片单独切出来，大小大概是16*16px；然后背景background:url(../images/index_icon.png) 101px -131px no-repeat改为background:url(../images/index_icon.png) right center no-repeat控制文字与图标的距离的话就调整padding-right的值大小即可，现在这里样式设的值为16px，我觉得应该正好合适不用改

可以使用jquery来实现 例如 $("table tr:odd").css("background","#fff")或者使用css3,例如table tr:2n{background:#fff}