html+css怎么在图片上添加文字

2024-11-01 12:54:04

推荐回答（5个）

回答（1）：

第一步：我们需要准备一个图像

作为一个例子，我想在深色背景的背景上放置白色文字。

第二步：将图像和字母放在一个div元素中

将图像和字母放在一个div标签中。在示例中，将文字“万里长城”放在p标记中。当然您可以使用标题标签而不是p标签，也可以使用span标签。

1

2

3

4

万里长城

第三步：指定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%;

}

回答（2）：

第一种方法：
添加一个DIV，采用绝对定位，图片所属DIV为基准

文字

第二种方法：图片作为背景图片

wenzi

回答（3）：

要在图片上显示文字，还要在放大缩小的时候文字不到处乱跑，这个就要用盒模型里面的大盒子套小盒子的方法了。下面举个小例子给你看看。

html大致样子：

这里是文字

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看起来眼花缭乱的。但只要做好了注释，还是分得清楚的啦，主要是这样弄看起来页面整齐一点。

回答（4）：

html+css在图片上添加文字有两种方法如下：

1.添加一个DIV，采用绝对定位，图片所属DIV为基准

文字

第二种方法:图片作为背景图片

wenzi

背景图片现在有了，然后在上面写上你需要写的字就可以了。

回答（5）：

第一种方法是写两个 div ，第一个div放图片，并且放在下面；第二个div放文字，并且放在上面。

第二种方法是写一个div ，图片作为背景图，然后div中放文字。