CSS Sprites和重复背景
Tom*_*len 17 html css css-sprites
我想将所有小图像保存在一个精灵文件中,例如:
现在假设我想添加一个薄的背景图像,它意味着重复x超过100%的元素宽度:
这是否必须存储为单独的实体,还是可以以某种方式将其存储在精灵图像中？如果可以对精灵的某个部分进行背景重复,我无法解决,我想不是,但我很确定我已经看到它在某个地方完成了.
Kis*_*aki 21
我不知道这是否是在CSS3了,但Gecko引擎(火狐4 ...)将image-rect作为-moz-image-rect它允许您选择使用的图像的特定部分.有了它,您可以选择精灵的一部分作为背景图像,然后重复它.
但它绝对不是广泛传播或标准化的.
我喜欢做的是做3种精灵.一个带有图标,根本不使用重复,一个用于水平重复图像,一个用于垂直重复图像.
这样你可以添加几个重复背景到一个精灵,但没有那么多麻烦使用它.
- (正如另一个注释:)对于水平和垂直重复的图像,你无论如何都要做自己的图像,所以那里没有精灵. (2认同)
Tom*_* Tu 17
你必须使精灵图像的全宽.否则在重复时可能会泄漏其他图像或空白区域.
请记住,重复非常小的背景图像(1-2px宽)会对性能产生可怕的影响 - 使用更大的图像总是更好,所以即使它很宽 - 它实际上可以更好地进行页面渲染然后1px广泛的.
编辑:(关于你的编辑)
如果你的元素是固定高度,你可以把它放在你的精灵宽度的精灵的100%宽度上,并带有所需的元素最大高度.或者,如果您知道它的最大宽度小于精灵的宽度,那么使它成为一个矩形,其中包含元素的最大宽度和高度.
如果你不知道最大高度,你想把它放在最顶层,所以渐变变成纯色,如果你把重复的图像放在精灵的最底部,并将其置于负顶值background-position: 0px -300px, 300px是从精灵顶部到精灵背景图像顶部的距离.
看看谷歌如何在精灵上重复BG:
- 我不久前曾经读过它 - 但是最近在我的HTML5画布游戏中我使用1px宽的重复背景图像作为游戏BG(在CSS中作为页面BG不在画布中),FPS in当我使用这个比较大的时候,游戏下降了~20%.当渲染引擎正在绘制重复背景时,它必须将它们合成,因此这就是它背后的原因 - 我很惊讶性能影响如此之大.它可以影响页面上的动画等 - 任何CPU重.我会尝试用数字挖一些文章:) (2认同)