html+css怎么在图片上添加文字
作为一个例子，我想在深色背景的背景上放置白色文字。
第二步：将图像和字母放在一个div元素中
将图像和字母放在一个div标签中。在示例中，将文字“万里长城”放在p标记中。当然您可以使用标题标签而不是p标签，也可以使用span标签。
1
2
3
4
<div class = "example" >
<img src="image/greatwall.jpg">
<p>万里长城</p>
</div>
第三步：指定position属性
为每个元素设置css的position属性。
对作为父元素的div指定为position:relative，以及对包含该字符串的p标签设置为absolute。img标签不动。
把p标签的位置设置为top:0; left:0。
为了把图像放在横向上，请指定为img标签的宽度为width : 100%。
1
2
3
4
5
6
7
8
9
10
11
12
.example{/*父元素div*/
position: relative;/*相対定位*/
}
.example p {
position: absolute;/*绝対定位*/
color: white;/*文字设为白色*/
top: 0;
left: 0;
}
.example img {
width: 100%;
}
已赞过
已踩过<
博思aippt
2024-07-20 广告
添加一个DIV，采用绝对定位，图片所属DIV为基准
<div style="position:relative;width:100px;height:100px;">
<img src="" alt="" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字
</div>
</div>
第二种方法：图片作为背景图片
<div style="background:url(abc.jpg) no-repeat left top;">
wenzi
</div>
要在图片上显示文字，还要在放大缩小的时候文字不到处乱跑，这个就要用盒模型里面的大盒子套小盒子的方法了。下面举个小例子给你看看。
html大致样子：
<body>
<div id="box1">
<div id="box2">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
<div id="wenzi">这里是文字</div>
</div>
</body>
css文件：
#box1{
position:relative;
width:500px;
height:500px;
margin:0 auto;
}
#box2{
position:relative;
width:100%;
height:100%;
}
img{
position:relative;
clear:both;
width:100%;
height:100%;
}
#wenzi{
position:relative;
clear:both;
width:100%;
top:-50%;
text-align:center;
color:black;
font-size:2em;
}
效果图片：
用这种方法有个好处，就是做响应布局的时候，或者用户在浏览器上放大缩小的时候，网页整体也跟着放大缩小，不会元素到处乱跑或者某个文字跑出来，这样看起来整体感要强烈一点。
这种做法的不足之处：div盒子有点多，html代码看起来比较臃肿，大盒子套着小盒子。做大页面的时候一个htm看起来眼花缭乱的。但只要做好了注释，还是分得清楚的啦，主要是这样弄看起来页面整齐一点。
html+css在图片上添加文字有两种方法如下：
1.添加一个DIV，采用绝对定位，图片所属DIV为基准
<div style="position:relative;width:100px;height:100px;">
<img src="" alt="" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字
</div>
</div>
第二种方法:图片作为背景图片
<div style="background:url(abc.jpg) no-repeat left top;">
wenzi
</div>
背景图片现在有了，然后在上面写上你需要写的字就可以了。
第二种方法是写一个div ，图片作为背景图，然后div中放文字。
|
广告 您可能关注的内容 |
