1

我有一个精灵图像，我想在多个跨度元素中显示 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>
4

1 回答 1

2

我发现的最好的解释clip是在这个网站上，尽管我认为你确实对它的工作原理有一个大致正确的掌握。您没有掌握的是这与您的情况有何关系。clip正在发生在 的背景图像上span。您30px是在告诉浏览器从左侧剪掉 30px 的图像（这正是您的小提琴示例正在做的事情），但它不会影响 background 的定位。

使用精灵，通常不使用clip，而是background-position切换精灵图像相对于显示它的元素的位置。因此，对于 128px x 89px 精灵图像，您将开始background-position: 0 0并移动到-189px 0将一个图像向右移动或移动0 -89px到下移一张图像。

我假设因为cliprequiresposition: absolute是你使用 的原因span，但事实上，因为你真的应该使用background-position，它会让你一起消除所有，直接在元素span的背景上做定位。a

于 2012-05-19T16:27:12.570 回答