CSS背景圖片的移動(dòng)距離可以通過(guò)調(diào)整背景位置屬性來(lái)實(shí)現(xiàn)，這個(gè)屬性允許你指定背景圖片在元素內(nèi)部的起始位置，通過(guò)像素、百分比或者相對(duì)位置來(lái)設(shè)定，下面是一些示例代碼，展示了如何移動(dòng)背景圖片：

示例1：使用像素移動(dòng)背景圖片

div {
  background-image: url('example.jpg');
  background-position: 50px 50px; /* 水平移動(dòng)50像素，垂直移動(dòng)50像素 */
}

示例2：使用百分比移動(dòng)背景圖片

div {
  background-image: url('example.jpg');
  background-position: 25% 75%; /* 水平移動(dòng)25%，垂直移動(dòng)75% */
}

示例3：使用相對(duì)位置移動(dòng)背景圖片

div {
  background-image: url('example.jpg');
  background-position: right top; /* 水平移動(dòng)到右側(cè)，垂直移動(dòng)到上方 */
}

示例4：綜合應(yīng)用

div {
  background-image: url('example.jpg');
  background-position: 30% 20px; /* 水平移動(dòng)30%，垂直移動(dòng)20像素 */
}

示例5：使用CSS變量移動(dòng)背景圖片

:root {
  --bg-position-x: 40%;
  --bg-position-y: 60px;
}
div {
  background-image: url('example.jpg');
  background-position: var(--bg-position-x) var(--bg-position-y); /* 根據(jù)變量移動(dòng)背景圖片 */
}

通過(guò)調(diào)整background-position屬性，你可以***地控制背景圖片在元素內(nèi)部的起始位置，這種方法在響應(yīng)式設(shè)計(jì)中特別有用，因?yàn)樗试S你根據(jù)屏幕大小和設(shè)備類型來(lái)調(diào)整背景圖片的位置。