CSS Clip - Sprite 图像

Question

我有一张 sprite 图片，我想在多个 span 元素上显示 128x89px 的部分。

在示例中，我将左剪辑设置为 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>

Answer 1

我在 clip 上找到的最好的解释是 at this site ，尽管我认为您对它的工作原理有一个大致正确的理解。您没有掌握的是这与您的情况有何关系。 clip 出现在 span 的背景图像上。您的 30px 告诉浏览器从左侧裁剪图像 30px(这正是您的 fiddle 示例所做的)，但它不会影响背景的定位.

使用 sprite，通常不使用 clip，而是使用 background-position 来切换 sprite 图像相对于元素的位置显示在。因此，对于 128px x 89px 的 Sprite 图像，您将从 background-position: 0 0 开始，然后移动到 -189px 0 以将一张图像向右移动或0 -89px 向下移动一张图像。

我假设因为 clip 需要 position: absolute 是你使用 span 的原因，但事实上，因为你真的应该使用 background-position，它可以让你把span一起去掉，直接定位在a元素的背景上。