這個CSS屬性中的負值是什麼？

background-position：-200px 0;這個CSS屬性中的負值是什麼？

一個網站說，它從底部裁剪圖像，並顯示其餘部分 ..另一個網站說它將圖像轉移到左側..它究竟做了什麼？

我想實現CSS Sprites ..由於這個定位thingy而存在問題...這是我迄今爲止實現的...它不能正常工作..我有幾個鏈接，我想要一個diff部分當鼠標移動到一個特定的鏈接時，圖像的顯示...我正在輸出作爲整個圖像顯示..它甚至不會裁剪它..我嘗試了很多東西，如改變定位，添加div ..什麼不..現在我很迷茫，我甚至不知道我從哪裏開始......有人可能會指出我在這裏做錯了什麼？爲什麼圖像沒有得到cropped..sure什麼是錯的這個定位X，Y值.... 下面的代碼： -

<style type="text/css"> 
#sprite ul{background:url(images/image.jpg) no-repeat; 
width:728px;height:1225px;display:block} 

#ID1{background-position:0 -1000px} 
#ID1:hover{background-position:0 -1000px} 

#ID2{background-position:0 -1000px} 
#ID2:hover{background-position:0-800px} 

#ID3{background-position:0 1000px} 
#ID3:hover{background-position:0 -600px} 

#ID4{background-position:0 1000px} 
#ID4:hover{background-position:0 -400px} 

#ID5{background-position:0 1000px} 
#ID5:hover{background-position:0 -200px} 

#ID6{background-position:0 1000px} 
#ID6:hover{background-position:0 -200px} 
</style>

HTML： -

<div id="sprite"> 
<ul> 
    <li><a href="#" id="ID1">link1</a></li> 
    <li><a href="#" id="ID2">link2</a></li> 
    <li><a href="#" id="ID3">link3</a></li> 
    <li><a href="#" id="ID4">link4</a></li> 
    <li><a href="#" id="ID5">link5</a></li> 
    <li><a href="#" id="ID6">link6</a></li> 
</ul> 
</div>

來源

2010-10-08 Serenity

background-position: -157px 0;將157個像素移位圖像到左側。它不會被裁剪。

代碼中的主要問題是，您要在ul上設置背景圖像，但要更改鏈接上的背景位置。所以你的背景位置規則將不起作用，因爲鏈接沒有背景。你想，而不是設置相同的背景圖像上所有的鏈接，可能喜歡的東西：

#sprite ul a { 
    background-image: url(images/image.jpg); 
    background-repeat: no-repeat; 
}

一些合適的尺寸一起，然後把它從那裏。

來源

2010-10-08 10:36:34

確定只是改變像你說的......現在當我把鼠標懸停在鏈接上時，應該出現的部分顯示正常，但是現在鏈接已經分開了很多，就像這張單個圖像中有5個圖像一樣。 ..每個高度大約200px ..現在每個鏈接之間有200的差距..我想要的是一個列表，其圖像的最頂部作爲背景，當用戶懸停在其他鏈接..背景應該相應地改變，即shld顯示圖像的部分。現在有什麼錯誤？ – Serenity 2010-10-08 10:50:26

[編輯]我想要的是當頁面第一次加載時，圖像的頂部大部分爲背景的列表 – Serenity 2010-10-08 11:00:10

您可以將您的更新代碼添加到您的問題嗎？或者給我們一個網頁的網址？ – 2010-10-08 11:13:52

一個網站表示，它從底部收集圖像並顯示其餘部分。另一個網站正在說它將圖像轉移到左側，它究竟做了什麼？

如果有疑問，相信the specification;水平位置在垂直位置之前。

#sprite ul

如果你想顯示的圖像爲背景，以列表項或錨的一部分，那麼你必須設置元素的背景。在這裏，您只是將整個圖像作爲背景添加到列表本身，而其他所有內容都放置在列表的頂部。

相反，您需要在每個鏈接上放置圖像的副本。

#ID2:hover{background-position:0-800px}

需要兩個值

來源

2010-10-08 10:34:43 Quentin

的background-position屬性是background-position-x和background-position-y的複合屬性，所以第一個值是horisontal位置和所述第二值之間的空間垂直位置。

位置是圖像左上角與左上角元素的相對位置，因此負值x表示圖像放置在元素的左側，實際上是從左側裁剪圖像。

（因此，該網站說，圖像被從底部裁剪既具有值的順序和方向混淆。）

來源

2010-10-08 10:35:06 Guffa

這個CSS屬性中的負值是什麼？

回答

相關問題