在制作一個(gè)頁(yè)面，我們經(jīng)常遍歷一些從數(shù)據(jù)庫(kù)獲取到的數(shù)據(jù)來(lái)顯示，如圖1所示，圖片和文字都是從數(shù)據(jù)庫(kù)獲取到的，使用v-for可以很快的遍歷顯示，為了使點(diǎn)擊效果更加明顯，當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，把點(diǎn)擊過(guò)的圖片替換顏色，問(wèn)題是怎么替換圖片顏色呢？

圖1

每一個(gè)職位類型設(shè)置2張圖片，鼠標(biāo)點(diǎn)擊時(shí)灰色背景隱藏，藍(lán)色背景顯示？這樣當(dāng)然可以。但是，我們還可以讓隱藏和顯示的2張圖片設(shè)計(jì)成1張圖來(lái)使用，如圖2。

圖2

如果直接獲取圖片路徑，并以圖片形式（img）顯示，圖片上的灰色和藍(lán)色背景就會(huì)同時(shí)顯示，可是我們只需要顯示一個(gè)背景，此時(shí)我們可以讓它以背景（background）形式顯示，代碼如下（圖3）：

圖3

此時(shí)我們需要用到background-position:x

y屬性，沒(méi)有選中時(shí)，我們?cè)O(shè)置背景位置位為background-position:0px

0px;，讓灰色背景圖顯示。當(dāng)選中時(shí)，設(shè)置藍(lán)色背景顯示的位置background-position:0px

-70px;，因?yàn)樗{(lán)色背景在灰色背景下方，所以設(shè)置y軸距離x軸不變。

圖4

設(shè)置樣式時(shí)，由于代碼執(zhí)行順序，選中背景位置的樣式要寫在初始化背景的后面。