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

1. 使用***定位
2. 使用相對定位
3. 使用z-index屬性

在CSS中，可以使用背景圖來裝飾網(wǎng)頁，同時還可以在背景圖上移動文字，下面是一些實現(xiàn)這一功能的方法。

使用***定位

在CSS中，可以使用***定位（absolute positioning）來移動文字，***定位是一種將元素相對于瀏覽器窗口進(jìn)行定位的方式，可以通過設(shè)置元素的top、right、bottom和left屬性來實現(xiàn)。

假設(shè)你有一個背景圖，并且你希望在背景圖的中央位置移動一些文字，你可以使用以下CSS代碼來實現(xiàn)：

div {
  background-image: url('your-image-url');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

這段代碼中，background-image屬性用于設(shè)置背景圖，position: absolute;將元素設(shè)置為***定位。top: 50%;和left: 50%;將元素設(shè)置為距離瀏覽器窗口中央50%的位置。transform: translate(-50%, -50%);將元素向右和向下移動50%，使其完全位于中央位置。

使用相對定位

除了***定位外，還可以使用相對定位（relative positioning）來移動文字，相對定位是一種將元素相對于其正常位置進(jìn)行定位的方式，可以通過設(shè)置元素的top、right、bottom和left屬性來實現(xiàn)。

假設(shè)你有一個背景圖，并且你希望在背景圖的右側(cè)位置移動一些文字，你可以使用以下CSS代碼來實現(xiàn)：

div {
  background-image: url('your-image-url');
  position: relative;
  right: 20px;
}

這段代碼中，position: relative;將元素設(shè)置為相對定位，right: 20px;將元素向右移動20像素，這樣，文字就會出現(xiàn)在背景圖的右側(cè)位置。

使用z-index屬性

在CSS中，可以使用z-index屬性來控制元素的堆疊順序，通過調(diào)整z-index值，可以將文字放置在背景圖的上層或下層，假設(shè)你有一個背景圖和一些文字，你可以使用以下CSS代碼來控制文字的堆疊順序：

div {
  background-image: url('your-image-url');
  position: relative;
  z-index: 1;
}
span {
  position: relative;
  z-index: 2;
}

在這段代碼中，div元素的z-index值為1，span元素的z-index值為2，由于span元素的z-index值大于div元素，因此span元素會覆蓋在div元素上，這樣，文字就會出現(xiàn)在背景圖的上層。