CSS背景圖片的移動(dòng)可以通過設(shè)置背景位置屬性來實(shí)現(xiàn),這個(gè)屬性可以***控制背景圖片在元素內(nèi)部的起始位置。
我們需要?jiǎng)?chuàng)建一個(gè)HTML元素,比如一個(gè)div,并給它一個(gè)class或者id,我們可以使用CSS來設(shè)置這個(gè)元素的背景圖片。
.myElement { background-image: url('myImage.png'); background-repeat: no-repeat; background-position: 0 0; }
在這個(gè)例子中,我們?cè)O(shè)置了一個(gè)名為"myElement"的元素的背景圖片為"myImage.png",并且設(shè)置了背景圖片不重復(fù),我們通過"background-position"屬性來設(shè)置背景圖片的起始位置,這個(gè)屬性的值是一個(gè)包含兩個(gè)部分的字符串,分別代表水平和垂直方向上的位置,在這個(gè)例子中,我們?cè)O(shè)置背景圖片從元素的左上角開始。
如果我們想要移動(dòng)背景圖片,我們可以改變"background-position"屬性的值,如果我們想要將背景圖片向右移動(dòng)100像素,我們可以這樣寫:
.myElement { background-position: 100 0; }
在這個(gè)新的例子中,背景圖片將從元素的右上角開始,因?yàn)槲覀儗⑺轿恢迷O(shè)置為100像素,這樣,背景圖片就會(huì)向右移動(dòng)100像素。
同樣地,如果我們想要將背景圖片向下移動(dòng)100像素,我們可以這樣寫:
.myElement { background-position: 0 100; }
在這個(gè)例子中,背景圖片將從元素的左下角開始,因?yàn)槲覀儗⒋怪蔽恢迷O(shè)置為100像素,這樣,背景圖片就會(huì)向下移動(dòng)100像素。