如何调整css-sprite的部分?

时间:2011-07-17 05:54:21

标签: dialog sprite background-position css

我想通过使用CSS-sprites改进jQuery的对话框代码,从而添加对话框边框的动画。

要做到这一点,我希望所有的艺术作品都在1个png文件中,一个css精灵。

我的问题是,为了支持最大化为2或3个监视器的对话框,我想我必须在css sprite文件中放置5000px宽/高边框图形。因为我找不到一种方法来调整css sprite图像的选定部分的大小。

基本上我想从精灵图像中调整区域(t,l,w,h)到我页面上具有不同宽度和高度的DIV或IMG的大小。 我想知道,这有可能吗?似乎背景位置根本不支持这一点。

我在How can I scale an image in a CSS sprite尝试了第一个解决方案,但无法使用它。

我尝试将新的background-size属性与background-position结合使用,但这也不会产生我想要的结果。

1 个答案:

答案 0 :(得分:1)

花了几个小时与css纠缠,但无法让精灵为对话而工作。

但我的动画对话框不需要很多帧(除非你想把实际的视频作为对话背景在线),所以对于我正在设计的对话框主题,我有8个312x312 png作为帧,8个请求,总计386kb。足以在对话框处于“突出显示”状态时创建发光动画。它是可行的。

我正在使用How can I scale an image in a CSS sprite

中的技术

在大约一个月内查看动态对话框的opensource版本的http://mediabeez.ws。 当我的自己开发的CMS使用它时,我将开发和测试这个独立组件,因此它将具有主题,拖放和类似的功能。