在CSS中，我們可以使用多種方法將圖片和文字疊加在一起，以下是幾種常見(jiàn)的方法：
1、***定位法：
這種方法中，圖片和文字都作為子元素，通過(guò)***定位將文字放置在圖片上。
```html
<div style="position: relative;">
<img src="image.jpg" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0; left: 0;">
<p>這是疊加的文字</p>
</div>
</div>
```
2、偽元素法：
使用偽元素::after或::before，在圖片元素后或前插入文字。
```html
<div style="position: relative;">
<img src="image.jpg" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0; left: 0;">
<p>這是疊加的文字</p>
</div>
</div>
```
3、z-index法：
通過(guò)調(diào)整z-index屬性，使文字圖層位于圖片圖層之上。
```html
<div style="position: relative;">
<img src="image.jpg" style="width: 100px; height: 100px; position: absolute;">
<div style="position: absolute; top: 0; left: 0; z-index: 1;">
<p>這是疊加的文字</p>
</div>
</div>
```
4、背景圖片法：
將圖片作為背景，文字直接寫(xiě)在背景圖片上。
```html
<div style="background-image: url('image.jpg'); background-size: cover;">
<p>這是疊加的文字</p>
</div>
```
方法可以根據(jù)具體需求選擇使用，也可以通過(guò)調(diào)整顏色、透明度等屬性，進(jìn)一步優(yōu)化疊加效果。
