CSS剪輯 - 雪碧圖像

我有一個精靈圖像，我想跨多個跨度元素顯示128x89px部分。CSS剪輯 - 雪碧圖像

在這個例子中，我將左邊的剪輯設置爲30px來突出顯示問題，通常這是128px的倍數。當我將左邊的剪輯設置爲30px時，它似乎添加了30px的左邊距。當然，我不需要添加負的左邊距來糾正它？

我是一個總共新手clip，因爲我從來沒有真正需要使用它，但現在有了。我對它的理解與一張紙的正方形相同。調整剪輯值將會移動紙張，從而改變所查看的圖像。

請幫忙。

的jsfiddle：http://jsfiddle.net/VgjXr/

CSS：

a { 
    border: 1px solid #000; 
    height: 89px; 
    width: 128px; 
    display: block; 
} 
span.image { 
    background-image: url('http://i1269.photobucket.com/albums/jj591/mark1979smith/splice.jpg'); 
    position: absolute; 
    display: block; 
    width: 128px; 
    height: 89px; 
    clip: rect(0px,158px,89px,30px); 
    clear: both; 
}

HTML：

<div class="element" id="cheeseOption7"> 
    <div id="optional_46"> 
     <a href="#">      
      <span class="image"><!-- --></span> 
     </a> 
    </div> 
</div>

來源

2012-05-19 Mark Smith

我已經clip找到的最好的交代是at this site，雖然我認爲你對它的工作原理有一個普遍正確的把握。你沒有把握的是與你的情況有關的方式。 clip發生在span的背景圖像上。您的30px告訴瀏覽器從左邊剪下30像素（這正是您的小提琴示例所做的），但是它不影響背景的定位。

使用精靈，一個不正常使用clip，但background-position切換精靈圖像位置相對於它顯示在元素。因此，對於你128倍像素X 89px精靈的圖像，應該用background-position: 0 0開始並移動到-189px 0將一個圖像向右移動或0 -89px向下移動一個圖像。

我假設，因爲clip需要position: absolute是爲什麼你正在使用的span，但事實上，因爲你真的應該使用background-position，它可以讓你消除span一起，只是做的背景定位直接使用a元素。

來源

2012-05-19 16:27:12 ScottS

太棒了，謝謝！我想是因爲我在腦海中使用剪輯（並最終得到使用它），我堅持使用它。現在我知道這不是使用它的正確位置，我已經恢復到舊的背景位置。 –

如果您考慮使用高密度像素，那麼使用剪貼畫的精靈是常態，比如ipad3 – albert

@ albert - 我很想好好理解您的評論。你能指點我一些文檔，說明如何以及爲什麼在這種情況下使用'clip'而不是'background-position'？我不確定高密度像素有多重要。 – ScottS

CSS剪輯 - 雪碧圖像

回答

相關問題