CSS控制背景圖片移動(dòng)的方法

在CSS中，我們可以使用background-position屬性來(lái)控制背景圖片的位置，如果想要讓背景圖片向左移動(dòng)，可以通過(guò)調(diào)整background-position屬性中的水平坐標(biāo)來(lái)實(shí)現(xiàn)。

具體步驟如下：

1、為元素設(shè)置背景圖片：

element {
  background-image: url('path-to-image.jpg');
}

2、調(diào)整background-position屬性中的水平坐標(biāo)，使其向左移動(dòng)：

element {
  background-position: -50px 0;
}

在上面的代碼中，50px可以根據(jù)需要移動(dòng)的像素?cái)?shù)進(jìn)行調(diào)整，負(fù)值表示向左移動(dòng)，正值表示向右移動(dòng)。0表示垂直坐標(biāo)不變，可以根據(jù)需要調(diào)整。

3、如果需要持續(xù)不斷地向左移動(dòng)背景圖片，可以結(jié)合使用animation和@keyframes來(lái)創(chuàng)建一個(gè)動(dòng)畫效果：

@keyframes move-left {
  0% { background-position: 0 0; }
  100% { background-position: -50px 0; }
}
element {
  animation: move-left 5s linear infinite;
  background-image: url('path-to-image.jpg');
}

上面的代碼創(chuàng)建了一個(gè)名為move-left的動(dòng)畫，該動(dòng)畫將背景圖片從原始位置移動(dòng)到左移50像素的位置，并在5秒內(nèi)完成這個(gè)移動(dòng)。linear表示移動(dòng)速度均勻，infinite表示動(dòng)畫將無(wú)限循環(huán)。