CSS定位 - 多背景位置屬性？

有沒有辦法爲單個元素設置多個背景位置屬性？根據鏈接的狀態（按下/懸停/默認），我需要同時更改所顯示圖像的X和Y值。CSS定位 - 多背景位置屬性？

我想在我的CSS文件中使用Y值靜態，而X位置需要根據導航欄中的每個元素（鏈接進入）進行更改。

有沒有辦法做到這一點？在線看，我還沒有找到一種方法來設置背景位置的頂部或左側參數。

來源

2011-08-27 Phillip

我可以用jQuery自己解決這個問題。如果有比使用jQuery更簡單的方法，請讓我知道！ – Phillip

Apparently，

[背景位置]接受一個或兩個長度值，百分比，或關鍵字。

如果只爲背景位置指定了一個值，則第二個值被假定爲中心。如果使用兩個值，並且至少有一個不是關鍵字，則第一個值代表水平位置，第二個代表垂直位置。

您很可能不得不依靠JavaScript來保存這些Y值。

來源

2011-08-27 22:51:47

我的問題是，設置背景位置再次完全重寫舊的。我需要能夠設置兩次（因爲X位置會動態變化）。我可以用jQuery來做到這一點。 – Phillip

你可以使用這個CSS來改變背景圖像位置根據其狀態的元素（常規，懸停，或活動）......假設你使用一個精靈爲你的背景：

#NavElement { 
    background-image:url(../img/button.png); 
    background-repeat:no-repeat; 
    background-position:top center; 
} 

#NavElement:hover { 
    background-position: center; /* center is assumed as the second value */ 
} 

#NavElement:active { 
    background-position:bottom center; 
}

此外，您可以在px中指定位置，而不是在底部，頂部或中心。

來源

2011-08-27 23:08:49 slang

唯一的問題是我必須從代碼中設置一個新的X位置。它將特定於所選的特定鏈接。它會覆蓋當前的背景位置設置（因此，我的問題）。 – Phillip

你可以使用js來設置背景位置：object.style.backgroundPosition =「Xpx，Ypx」...但是我不認爲我完全理解你的問題，你能發佈你的代碼嗎？ – slang

我確實使用jQuery來獲得我想要的。我需要在不同的時間和動態訪問不同的X/Y座標。設置單個CSS類將無濟於事，所以我必須使用jQuery。有什麼可以幫助的是'background-position-x'或'background-position-y' - 只是這兩個設置不是標準的。我需要能夠改變一個座標而不改變另一個座標，但是當你嘗試使用'background-position'時，它會忽略任何其他先前的設置。 – Phillip

CSS定位 - 多背景位置屬性？

回答

相關問題