-webkit-border-image with css sprites

Question

我正在使用-webkit-border-image来指定样式中的主要精灵图像。精灵图像是一堆按钮图像。我用什么样式属性来索引我的主精灵图像？

.red {
    -webkit-border-image: url(sprite.png) 0 14 0 14;
}

红色按钮精灵位于x = 0，y = 21。

我使用什么属性？如果是背景我会使用background-position。我不确定-webkit-border-image使用什么。

Answer 1

我的印象是使用边框图像无法实现精灵。但我被证明是错的。

边框图像语法如下：

border-image: url([file]) [offsettop] [offsetright] [offsetbottom] [offsetleft];

border-image与边框宽度相关联。可以使用偏移量来选择要从原点显示的图像量（即10px的顶部偏移+ 10px的边框顶部宽度将从像素0到像素10显示10px）。

但是如果使用 0px的边框宽度，则可能使用偏移来隐藏图像的一部分。在这种情况下，您可以使用填充来实现与border-width相同的对齐。

有关更多信息和演示，请参阅此帖子（Scott Murray更正了我，感谢Scott）：

http://alignedleft.com/blog/2010/07/using-css3-border-image-sprites-for-flexible-button-states/comment-page-1/#comment-832

Answer 2

border-image无法做到这一点。根据{{​​3}}，CSS3将为图像切片和图像精灵定义新语法。