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

html-css012

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

1、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。

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

3、接着可以通过url()来连接图片，url里面放置的就是背景图片的路径。

4、随意地放了一张图片用作背景，一定要注意，路径要写对。

5、这样，保存之后文字就会覆盖在图片的上面了。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：span {position: absolutetop: 45pxleft: 180px}。

3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。

文字在图片上显示

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

#abox{

position:relative/*容器相对定位*/

width:300px/*宽度300px*/

margin:0 auto/*横向居中*/

}

#abox img{

width:300px/*宽度300px*/

}

span{

position:absolute/*文字容器绝对定位*/

display:block/*span转为块元素*/

width:100%/*宽度相对于父容器100%*/

text-align:center/*文字居中*/

top:0/*距离父容器顶部0*/

left:0/*距离父容器左侧0*/

color:red/*文字颜色红色*/

font-size:18px/*文字大小既文字高度18px*/

font-weight:bold/*文字加粗*/

}

</style>

</head>

<body>

<div id="abox"><!--容器，相对定位-->

  <img src="123.jpg"><!--图片-->

  <span>我要显示文字</span><!--文字，绝对定位-->

</div>

</body>

</html>