Based on my testing, it seems the page renders faster using the smallest image possible, and let CSS do the tiling for itself. The speed at which this takes place is solely dependent on the browser.
As for translucent backgrounds, using CSS would be lighter on bandwidth, but CSS opacity still isn't fully supported, so I would take that into consideration when tackling something like that.
I'd be very curious to know what the results of other people's testing...
For instance, in Safari, it's more efficient to use CSS transformations to animate elements than JS.
In general:
you want to avoid tiling very small images. A 20px image will tile better than a 1px as the browser is doing a lot less work to repaint the entire screen. Likely not much of a difference between 20px and 100px, though.
anything that can be done with CSS will likely be more efficient than loading another image. (such as rounded corners, drop shadows, etc.)
a big caveat is IE's css filters. A lot of those are not efficient and you may be better off reverting to images.
发布评论
评论（2）
根据我的测试，似乎使用尽可能小的图像页面渲染速度更快，并让 CSS 自己进行平铺。此过程发生的速度完全取决于浏览器。
至于半透明背景，使用 CSS 会减少带宽，但 CSS 不透明度仍然没有完全支持，所以在处理类似的问题时我会考虑到这一点。
我很好奇其他人的测试结果是什么......
Based on my testing, it seems the page renders faster using the smallest image possible, and let CSS do the tiling for itself. The speed at which this takes place is solely dependent on the browser.
As for translucent backgrounds, using CSS would be lighter on bandwidth, but CSS opacity still isn't fully supported, so I would take that into consideration when tackling something like that.
I'd be very curious to know what the results of other people's testing...
是的，这都是以操作系统和浏览器为中心的。
例如，在 Safari 中，使用 CSS 转换来对元素进行动画处理比使用 JS 更有效。
一般来说：
Yes, this is all OS and browser centric.
For instance, in Safari, it's more efficient to use CSS transformations to animate elements than JS.
In general: