html5怎么把字写在图片上
时间: 2023-08-05 10:05:03 浏览: 285
要在图片上添加文字,可以使用CSS的position和z-index属性来实现。具体步骤如下:
1. 首先,将图片和文字都放在一个容器内,例如一个div容器;
2. 然后,将图片设置为该容器的背景图片,例如:background-image:url('image.jpg');
3. 接着,将容器的position属性设置为relative,让它成为相对定位的元素;
4. 最后,将文字添加到容器内,并设置它的position属性为absolute,让它成为绝对定位的元素。同时,使用z-index属性将文字的层级设置为比图片高,这样文字就可以显示在图片上面了。
以下是一个简单的例子:
HTML代码:
```
<div class="image-container">
<div class="text">
<h1>这是一段文字</h1>
<p>这是文字的描述</p>
</div>
</div>
```
CSS代码:
```
.image-container {
width: 500px;
height: 500px;
position: relative;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: white;
text-align: center;
}
.text h1 {
font-size: 48px;
margin-bottom: 20px;
}
.text p {
font-size: 24px;
}
```
在这个例子中,我们创建了一个名为image-container的容器,将背景图片设置为image.jpg,并使用了cover和center属性来让图片居中并填充整个容器。然后,我们创建了一个名为text的子容器,将文字添加到其中,并设置它的position为absolute,让它成为绝对定位的元素。接着,使用transform属性来让文字居中显示。最后,使用z-index属性将文字的层级设置为1,让它显示在图片上面。