文字在图片上显示
<!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>
温馨提示：答案为网友推荐，仅供参考
第1个回答 2021-02-05
先设置一个div并插入图片，设置这个div相对定位。
再第一个div里插入第二个div设置绝对定位，并输入文字即可。本回答被网友采纳
再第一个div里插入第二个div设置绝对定位，并输入文字即可。本回答被网友采纳