html中怎么让文字在图片的上面？

html中怎么让文字显示在图片上面。列如这种。... html中怎么让文字显示在图片上面。
列如这种。展开

 我来答

11个回答

#热议# 为什么说不要把裤子提到肚脐眼？

刺友互

高粉答主

2019-06-17 · 每个回答都超有意思的

知道答主

回答量：3979

采纳率：100%

帮助的人：73.3万

我也去答题访问个人页

关注

展开全部

1、在div里面书写了一些文字，然后想要在放入一张图片。

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

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

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

5、放一张图片用作背景，注意，路径要写对。

6、保存之后文字就会覆盖在图片的上面了，而如果使用img标签，则没有这种效果。

已赞过 已踩过<

评论收起

博思aippt
2024-07-20 广告

作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT... 点击进入详情页

本回答由博思aippt提供

百度网友4970322
2019-04-21 · TA获得超过1.5万个赞

知道答主

回答量：647

采纳率：50%

帮助的人：38.3万

我也去答题访问个人页

关注

展开全部

html中可以用css相对定位让文字在图片的上面。

1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加img标签和p标签，这时文字和图片是分开的：

2、分别为div标签和p标签添加“position: relative;”和“position: absolute;”，这时p标签和div标签就形成了相对关系：

3、为p标签设置“top”和“left”属性，属性值为距离顶部和左侧的长度，这时文字就会显示在图片的上面：

本回答被网友采纳

已赞过 已踩过<

评论收起

雪飞潇潇
2017-06-13 · TA获得超过6275个赞

知道大有可为答主

回答量：1968

采纳率：91%

帮助的人：873万

我也去答题访问个人页

关注

展开全部

文字在图片上方的效果图

参考代码

<!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>

已赞过 已踩过<

评论收起

上海中公优就业
2017-06-14 · TA获得超过504个赞

知道小有建树答主

回答量：312

采纳率：66%

帮助的人：188万

我也去答题访问个人页

关注

展开全部

第一种方式便是将 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>
其余的位置再根据实际情况进行微调就好~~