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

html-css09

如何用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超链接的伪类中表示鼠标悬浮上的是hover。要定义链接样式，其中必不可少的就是超级链接中的锚标签，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法，写法如下：link，定义正常链接的样式。visited，定义已访问过链接的样式。hover，定义鼠标悬浮在链接上时的样式。active，定义鼠标点击链接时的样式。其中：：link和：visited只能用于设置超链接a，：hover和：active则可适用所有元素，hover用来表示鼠标移入的状态，active用来表示鼠标点击。