css - CSS平铺背景图像的最佳尺寸

标签 css performance background-image

人们经常说,当使用 background-image 平铺网页背景时,由于需要平铺的频率较低,因此使用尺寸较大的图像性能会更好。一段时间以来,我一直将它们设为 8x8 像素,或 8 的倍数。

但是有没有人有指向数据的链接,这些数据可以证明在一系列浏览器中都是这种情况,包括渲染时间或页面渲染不同点的 CPU 负载?

最佳答案

我想这在您评论中列出的这些现代浏览器中无关紧要:

IE 8/9, and latest versions of Firefox/Safari/Chome/Opera

但是,我听说 IE8 中的一个错误,当涉及到大小正好为 1px * 1px 的图像时:

Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

参见:http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
和演示:http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/

所以,8x8 似乎是一个足够好的尺寸来使用。如果 Internet 上有人对此足够关心并对其进行严格的基准测试,我会感到惊讶。


我确实找到了这个,它讨论了这个主题:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

请务必阅读评论。

总结一下,我将引用几个月前的自己的话:

I'd imagine it matters very little in [the] modern browsers [IE 8/9, and latest versions of Firefox/Safari/Chome/Opera] you listed in your comment.

关于css - CSS平铺背景图像的最佳尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4932664/

相关文章:

html - 如何制作上下垂直线

javascript - 样式隐藏下拉菜单

javascript - 如何在导航栏中向左移动内容

java - 您建议使用哪些服务器端应用程序性能测试工具?

html - css 选择器将规则应用于多个类的相似元素

C# 相交字符串列表的最快方法

c# - 测试性能

asp.net - 多个选择器中的多个背景

css - 如何在 iOS 上为 CSS 背景图像使用 SVG 片段标识符?

background-image - 具有水平渐变的 CSS 背景图像