本文目錄導(dǎo)讀：

1. 使用***定位
2. 使用背景圖片
3. 使用偽元素
4. 使用透明度

CSS圖片文字顯示：方法與技巧

在CSS中，我們可以使用多種方式在圖片上顯示字，以下是一些常見的方法：

使用***定位

我們可以使用***定位將文字固定在圖片上的某個位置，將文字顯示在圖片的左上角，可以使用以下代碼：

.image-container {
  position: relative;
}
.image-container p {
  position: absolute;
  top: 0;
  left: 0;
}

使用背景圖片

我們可以將文字作為背景圖片的一部分，然后使用CSS的background-position屬性來定位文字，將文字顯示在圖片的中心位置，可以使用以下代碼：

.image-container {
  background-image: url('image.png');
  background-position: center;
}

使用偽元素

我們可以使用CSS的偽元素::after或::before來在圖片上顯示文字，這種方法可以讓我們更加靈活地控制文字的位置和樣式，將文字顯示在圖片的下方，可以使用以下代碼：

.image-container {
  position: relative;
}
.image-container::after {
  content: '這是一段文字';
  position: absolute;
  bottom: 0;
  left: 0;
}

使用透明度

我們可以使用CSS的opacity屬性來控制文字的透明度，使其與圖片更好地融合，將文字顯示為半透明狀態(tài)，可以使用以下代碼：

.image-container p {
  opacity: 0.5;
}

是一些常見的CSS圖片文字顯示方法，我們可以根據(jù)具體的需求選擇適合的方法來實現(xiàn)文字在圖片上的顯示。