html中怎么让文字在图片的上面?
发布网友
发布时间：2022-04-23 20:39
共11个回答
热心网友
时间：2022-04-06 13:47
1、在div里面书写了一些文字，然后想要在放入一张图片。
2、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。
3、然后通过background给div添加一张图片作为它的背景。
4、通过url()来连接图片，url里面放置的就是背景图片的路径。
5、放一张图片用作背景，注意，路径要写对。
6、保存之后文字就会覆盖在图片的上面了，而如果使用img标签，则没有这种效果。
热心网友
时间：2022-04-06 15:05
html中可以用css相对定位让文字在图片的上面。
1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加img标签和p标签，这时文字和图片是分开的：
2、分别为div标签和p标签添加“position: relative;”和“position: absolute;”，这时p标签和div标签就形成了相对关系：
3、为p标签设置“top”和“left”属性，属性值为距离顶部和左侧的长度，这时文字就会显示在图片的上面：
热心网友
时间：2022-04-06 16:39
文字在图片上方的 效果图
参考代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*div1下面 包含着1个图片和1段文字*/
#div1{
position: relative;/*相对定位*/
width: 267px;
height: 140px;
}
/*图片部分的设置*/
#img1{
/*position: static;默认定位,可以省略*/
width: 100%;
height: 100%;
}
/*文字的设置*/
#span1{
position: absolute;/*绝对定位*/
width: 100%;
bottom: 0px;/*离底下0像素*/
left: 0px;/*离左边0像素*/
text-align: center;
font-size: 18px;
color: white;
}
</style>
</head>
<body>
<div id="div1">
<span id="span1">惬意的海岸,旖旎的风景</span>
<img src="img/hbfj.jpg" id="img1" />
</div>
</body>
</html>
热心网友
时间：2022-04-06 18:31
第一种方式便是将 image 作为背景图片，即：background-image:url(".......");
在此可以控制背景图片的横向和纵向的平铺：
background-repeat : none; 不进行平铺
background-repeat : repeat-x; 横向x轴进行平铺
background-repeat : repeat-y; 横向y轴进行平铺
background-repeat : repeat; 横向x轴与纵向y轴都进行平铺，这也是默认情况的状态
第二种方式是将img块与文字块放在同一个div 中，然后设置他们之间的位置，例如如下代码块：
<div style="position:relative;">
<img src="...." />
<div style="position:absolute; z-index:2; left:10px; top:10px">
haha
</div>
</div>
其余的位置再根据实际情况进行微调就好~~
热心网友
时间：2022-04-06 20:39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box{
position: relative;
width: 100px;
height: 200px;
border: 1px solid red;
}
.box img{
width: 100px;
height: 200px;
background-color: blue;
}
.box span{
position: absolute;
bottom: 0;
left: 0;
background-color: #ccc;
height: 30px;
width:100px;
text-align: center;
display: none;
}
.box img:hover+span{
display: block;
}
</style>
<body>
<div class="box">
<img src="">
<span>Learn</span>
</div>
</body>
</html>
描述不太清楚 是不是类似情况
热心网友
时间：2022-04-06 23:03
父级给相对定位position：relative。下面需要定位的给绝对定位position:absolute;left:0;bottom:0;
热心网友
时间：2022-04-07 01:45
图片设置成背景图片！可以用：background-image: url(图片URL);
热心网友
时间：2022-04-07 04:43
图片要用背景图片哦，background:url(../img/jt.png)，不要用img追问
因为用的是多张图片不是单张的，所以用的li标签。
热心网友
时间：2022-04-07 07:57
可以用图片做背景；
也可以
热心网友
时间：2022-04-07 11:29
修改文字所在容器的 z-index 的值追问
这是代码。难道说只能用定位了？
文字
热心网友
时间：2022-04-07 15:17
1、使用背景图片
2、对文字进行定位
