在CSS中，我們可以使用多種方法將文字出現(xiàn)在圖片上，以下是一些常見的實現(xiàn)方式：
1、使用***定位：
我們可以將圖片設(shè)置為相對定位元素，然后在其上***定位文字。
```css
.image-with-text {
position: relative;
width: 300px;
height: 200px;
}
.image-with-text p {
position: absolute;
top: 50px;
left: 100px;
}
```
```html
<div class="image-with-text">
<img src="image.jpg" alt="背景圖片">
<p>這是一段文字</p>
</div>
```
2、使用偽元素：
我們可以使用偽元素::after 在圖片上添加文字。
```css
.image-with-text {
position: relative;
width: 300px;
height: 200px;
}
.image-with-text::after {
content: "這是一段文字";
position: absolute;
top: 50px;
left: 100px;
}
```
```html
<div class="image-with-text">
<img src="image.jpg" alt="背景圖片">
</div>
```
3、使用背景圖片和文字疊加：
我們可以將圖片設(shè)置為背景圖片，然后在上層添加文字。
```css
.image-with-text {
background-image: url("image.jpg");
background-size: cover;
}
.image-with-text p {
position: relative;
z-index: 1;
}
```
```html
<div class="image-with-text">
<p>這是一段文字</p>
</div>
```
4、使用SVG：
我們可以創(chuàng)建一個SVG圖像，然后在其中添加文字。
```html
<svg width="300" height="200">
<rect width="100%" height="100%" fill="url(#image)" />
<text x="50" y="50" fill="white">這是一段文字</text>
</svg>
```
其中url(#image) 指向一個外部圖像，這種方法可以實現(xiàn)復雜的圖像和文字疊加效果。
