CSS 剪辑 - 精灵图像

Posted 2023-02-25

【中文标题】CSS 剪辑 - 精灵图像

【英文标题】：CSS Clip - Sprite Image

【发布时间】：2012-05-19 12:00:30

【问题描述】：

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

在示例中，我将左剪辑设置为 30px 以突出显示问题，通常这将是 128px 的倍数。当我将左剪辑设置为 30 像素时，似乎添加了 30 像素的左边距。当然，我不需要添加负的左边距来更正它？

我是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>

【参考方案1】：

我在clip 上找到的最佳解释是at this site，尽管我认为您确实大致正确地掌握了它的工作原理。您没有掌握的是这与您的情况有何关系。 clip 出现在span 的背景图像上。您的 30px 告诉浏览器从左侧剪掉 30px 的图像（这正是您的小提琴示例正在做的事情），但 它不会影响背景的定位。

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

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

【讨论】：

太棒了，谢谢！我想是因为我脑子里有使用剪辑的想法（并最终开始使用它）我坚持使用它。现在我知道这不是使用它的正确位置，我已经恢复到良好的旧背景位置。

如果考虑到 ipad3 等高密度像素，则带有剪辑的精灵是常态

@albert--我很想更好地理解你的评论。您能否指出一些文档来说明在这种情况下如何以及为什么使用clip 而不是background-position？我不确定高密度像素有多重要。