CSS重复背景，sprite或1px png [英] CSS repeating background, sprite or 1px png

问题描述

确定我想知道什么是有关CSS背景图片和http请求的最佳做法。

Ok I want to know what is the best practice for performance regarding CSS background images and http requests.

1。使用许多不同的1px png背景图片，产生几个单独的http请求

或

2。使用一个大图像精灵与大渐变块块用作背景图像。

喜欢听到你的意见...

Love to hear you opinions...

推荐答案

我认为最好使用数据：uri技术的小图像（如1px的背景）。

I think it would be better to use data:uri technique for small images (like 1px-backgrounds).

background: url(data:image/png;base64,....) top left repeat-x;

它适用于所有现代浏览器。对于旧的IE浏览器（如IE6，IE7），您可以通过条件注释覆盖样式。

It works for all modern browsers. For old IE browsers (like IE6, IE7) you can overwrite styles by conditional comments.

background: url("path/to/background.png") top left repeat-x;

当然这样你必须重新编码背景，如果它已经改变。但它节省了很多请求。

Of course this way you have to re-encode background, if it has changed. But it saves a lot of requests.

这篇关于CSS重复背景，sprite或1px png的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！