Question

我有一个精灵图像，我希望在多个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（这正是您的小提琴示例正在做的事情），但它不会影响背景的定位。 / p>

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

我认为因为clip需要position: absolute才是您使用span的原因，但事实上，因为您真的应该使用background-position，它会让您消除将span全部放在一起，直接在a元素的背景上进行定位。

CSS剪辑 - 精灵图像

1 个答案: