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

html-css024

如何用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让文字显示在图片上的操作步骤如下:

1、首先在div里面书写文字,然后放入1张图片。

2、这时应该先给div设置宽度和高度,保证文字有1个范围。

3、然后通过background给div添加1张图片作为它的背景。

4、然后通过url()来连接图片,这个时候url里面放置的就是背景图片的路径。

5、然后放入1张图片用作背景,注意路径正确。

6、最后点击保存,文字就会覆盖在图片上,css让文字显示在图片上的问题就解决了。

图片不要跟文字同在一容器里就很好弄了

图片归图片,文字用个DIV或P包起来~~~左浮动

一定要不变动html结构的话,那就把外边的容器设成相对,然后左填充至少100px;

里面的图片设成绝对,距左设为零,距上默认为零也可以设置一下零。