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

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

 我来答

11个回答

#热议# 不吃早饭真的会得胆结石吗？

刺友互

高粉答主

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

知道答主

回答量：3979

采纳率：100%

帮助的人：67.6万

我也去答题访问个人页

关注

展开全部

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

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

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

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

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

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

已赞过 已踩过<

评论收起

logo在线生成器
2024-10-28 广告

在上海数都信息科技有限公司，我们专注于前沿的数字视觉设计技术，为客户提供定制化的文字图标生成服务。利用先进的算法与创意美学融合，将文字转化为独特而富有表现力的图标，不仅保留了文字的信息精髓，更赋予了其视觉上的冲击力和辨识度。无论是品牌标识、... 点击进入详情页

本回答由logo在线生成器提供

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

知道答主

回答量：647

采纳率：50%

帮助的人：36.9万

我也去答题访问个人页

关注

展开全部

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获得超过6273个赞

知道大有可为答主

回答量：1968

采纳率：91%

帮助的人：845万

我也去答题访问个人页

关注

展开全部

文字在图片上方的效果图

参考代码

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

帮助的人：185万

我也去答题访问个人页

关注

展开全部

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