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剪辑 - 雪碧图像

回答

相关问题