使用負值在CSS精靈中使用背景位置

我的問題是關於background-position屬性的負值。使用負值在CSS精靈中使用背景位置

我正在閱讀Jon Duckett的HTML和CSS，並且我有下面的sprite，其中每個按鈕的高度是40px。

我也產生了一些下面的代碼從書來激活這些精靈當用戶懸停和點擊過這些按鈕。

\t \t a.button { 
 
\t \t \t height: 36px; 
 
\t \t \t background-image: url("https://image.ibb.co/jnHrwk/button_sprite.jpg"); 
 
\t \t \t text-indent: -9999px; 
 
\t \t \t display: inline-block; 
 
\t \t } 
 
\t \t a#add-to-basket { 
 
\t \t \t width: 174px; 
 
\t \t \t background-position: 0px 0px; 
 
\t \t } 
 
\t \t a#framing-options { 
 
\t \t \t width: 210px; 
 
\t \t \t background-position: -175px 0px; 
 
\t \t } 
 
\t \t a#add-to-basket:hover { 
 
\t \t \t background-position: 0px -40px; 
 
\t \t } 
 
\t \t a#framing-options:hover { 
 
\t \t \t background-position: -175px -40px; 
 
\t \t } 
 
\t \t a#add-to-basket:active { 
 
\t \t \t background-position: 0px -80px; 
 
\t \t } 
 
\t \t a#framing-options:active { 
 
\t \t \t background-position: -175px -80px; 
 
\t \t }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Image Rollovers and Sprites</title> 
 
</head> 
 
<body> 
 
\t <a class="button" id="add-to-basket">Add to Basket</a> 
 
\t <a class="button" id="framing-options">Framing Options</a> 
 
</body> 
 
</html>

現在，在示例代碼中，選擇框架選項，物業background-image被賦予值-175px 0px。

但是，我認爲，因爲圖像是通過CSS中的座標系來查看的，所以我認爲正確的，這將是175px 0px，並下降40px，175px 40px。

爲什麼會離開，並倒在這個例子給出負值？

來源

2017-08-29 Bob Smith

背景的默認值是0,0。如果您爲x設置正值，則向右移動，如果負值向左移動，則向右移動向上移動，向下移動負值。 -175px -40px左右移動。就像你設置正面或負面的保證金頂部一樣。當您設置負值時，它會以相反的邊距運行。 – bdalina

實際上，您正在移動/平移座標系中的精靈圖像。根據對css sprite with negative background positions not clear的回答進行調整，要在位置x = 50和y = 20處顯示圖像，請將精靈-50移動到座標系中的左側和-20頂部。

-50, -20 
|-----------------------------------------------| 
|            | 
|  0,0          | 
|  |--          | 
|  |          | 
|            | 
|            | 
|            | 
|-----------------------------------------------|

來源

2017-08-29 16:10:34 jfeferman

瞭解得非常好，謝謝！ –

這個定位系統讓我困惑了一會兒。謝謝！ – djinn

使用負值在CSS精靈中使用背景位置

回答

相關問題