2010-07-07 102 views
3

我使用-webkit-border-image来指定我的主精灵图像的风格。精灵图像是一堆按钮图像。我用什么样式属性来索引我的主精灵图片?-webkit-border-image与css精灵

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

红色按钮精灵在x = 0,y = 21。

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

回答

1

你不能这样做,border-image。根据this,CSS3将为图像切片和图像精灵定义新的语法。

2

我还有一种印象是,使用边界图像不可能发现精灵。但我被证明是错误的。

边界图像的语法如下:

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

边界图像是联系在一起的边界宽度。可以使用偏移量来选择要从原点显示的图像数量(即10px的顶点偏移量,10px的边界顶宽度将从像素0到像素10显示10像素)。

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

看到这个职位的详细信息和演示(我在那里由斯科特·默里,感谢斯科特校正):

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