CSS平铺背景图像的最佳大小 [英] Optimum size of CSS tiled background-images

问题描述

通常，当使用背景图像平铺网页的背景时，由于需要较少地平铺，所以对于具有较大尺寸的图像的性能更好。有一段时间，我一直在使他们8x8像素，或8的倍数。

但是有没有人的数据链接，证明这是跨越一系列的浏览器，在渲染时间，或在各个页面渲染的CPU负载？

解决方案

我想象它的重要性很小您在评论中列出的这些现代浏览器：

IE 8/9和最新版本的
Firefox / Safari / Chome / Opera

但是，我听说过IE8中的一个错误，当它涉及到一个大小 1px * 1px ：

Internet Explorer 8不执行
重复1x1像素
半透明背景图片
正确当
上的任何其他元素的页面正在使用-ms-filter
drective作为alpha透明度：

  -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 足够好的尺寸使用。如果Internets上的任何人都非常关心这一点，并对其进行严格的基准测试，我会很惊讶。

---

，其中讨论了主题：

http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

总结一下，我会在几个月前引用自己的意见：

我想，在现代浏览器[IE 8/9，最新版本的Firefox / Safari / Chome / Opera]中，列出
在您的评论中。

It's often stated that when tiling the background of a web page with background-image, that performance is better with an image of larger dimensions due to it needing to be tiled less frequently. For a while I've been making them 8x8 px, or multiples of 8.

But does anyone have links to data that prove this is the case across a range of browsers, taking in rendering times, or CPU load at various points of page rendering?

解决方案

I'd imagine it matters very little in these modern browsers you listed in your comment:

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

However, I have heard of a bug in IE8 when it comes to an image of exactly the size 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)";

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
and the demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/

So, 8x8 seems like a good enough size to use. I'd be surprised if anyone on the Internets has cared enough about this to rigorously benchmark it.

---

I did find this, which discusses the subject:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

Make sure to also read the comments.

To sum it up, I'm going to quote myself from months ago:

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平铺背景图像的最佳大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！