我-webkit-border-image
用来在样式中指定我的主要精灵图像。精灵图像是一堆按钮图像。我使用什么样式属性来索引我的主要精灵图像?
.red {
-webkit-border-image: url(sprite.png) 0 14 0 14;
}
红色按钮精灵位于 x=0, y=21。
我使用什么属性?如果是背景,我会使用background-position
. 我不确定该用于什么-webkit-border-image
。
我-webkit-border-image
用来在样式中指定我的主要精灵图像。精灵图像是一堆按钮图像。我使用什么样式属性来索引我的主要精灵图像?
.red {
-webkit-border-image: url(sprite.png) 0 14 0 14;
}
红色按钮精灵位于 x=0, y=21。
我使用什么属性?如果是背景,我会使用background-position
. 我不确定该用于什么-webkit-border-image
。
我也觉得精灵不可能使用边框图像。但事实证明我错了。
边框图像语法如下:
border-image: url([file]) [offsettop] [offsetright] [offsetbottom] [offsetleft];
边框图像与边框宽度相关联。可以使用偏移量来选择从原点显示的图像数量(即 10px 的顶部偏移量 + 10px 的边框顶部宽度将显示从像素 0 到像素 10 的 10 像素)。
但是,如果您改用0px 的边框宽度,则可以使用偏移量来隐藏图像的一部分。在这种情况下,您可以使用填充来实现与边框宽度相同的对齐方式。
有关更多信息和演示,请参阅这篇文章(Scott Murray 纠正了我,感谢 Scott):
你不能用border-image
. 据此, CSS3 将为图像切片和图像精灵定义新的语法。