HTML中，怎么在图片的下面加入文字啊？

html-css09

HTML中，怎么在图片的下面加入文字啊？,第1张

使用定位来写的，首先一个大盒子装着图片，

然后一个盒子装着头像和文字，把装着头像和文字

的盒子根据装着图片的盒子进行定位就可以了，

像这样的其实很简单的，要多思考和分析

代码，要注意图片你要自己放图片，和修改图片路径

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>图片上放文字</title>

<style type="text/css">

html,body{

margin:0

}

.auto-img{

display: block

width:100%

}

.box{

width:100%

margin-top: 50px

}

.box-cent{

width:50%

margin:0 auto

position: relative

}

.texbox{

position: absolute

width:50%

line-height: 80px

background-color: #0f0

text-align: center

top:50%

left:50%

transform: translate(-50%, -50%)

}

</style>

</head>

<body>

<div class="box">

<div class="box-cent">

<img class="auto-img" src="images/000.jpg"/>

<div class="texbox">我是用来装头像和文字的盒子</div>

</div>

</div>

</body>

</html>

在后图的外面添一对标签，DIV 、span 差不多都行，将图片包起来，哈哈。然后给图片这块指定位置：<div style="position:absolutetop:88pxleft:88px"><img src=88.png></div>88px是位置，top是离网页最上、或是position:relative形式定位的父层的最上面的距离像素值，你根据距离调整数字。 top是离网页最左、或是position:relative形式定位的父层的最左面的距离像素值，你根据距离调整数字。 最严格的，还要给层分层次。那个层在最底下数字越小。那就后面加z-index如：<div style="position:absolutetop:88pxleft:88pxz-index:8"><img src=88.png></div>