当前位置：首页 → 问答吧 → 提高页面速度，div css如何用一张背景图实现全站背景图片调用

提高页面速度，div css如何用一张背景图实现全站背景图片调用

时间：2009-02-23

来源：互联网

最近在忙于改版湖南湘湘家教网，想最大程度上优化首页的代码节省宽带，方便用户，但是苦于CSS不是那种很牛的，所以在这里想请大伙分享一下自己经验以便小弟学习一下，谢谢，回到正题：提高页面速度，div+css如何用一张背景图实现全站背景图片调用，这里我分析了一下淘宝它们都这样的做，是用CSS去定位的，但是有一点不解之处，这背景图片如在PS 里是不是定位好了或者还是随便摆一下再通过CSS去定位的？我试了一下，全站背景图对定位要求的很严格很准确

[ 本帖最后由 magbox 于 2009-2-23 12:52 编辑 ]

作者: magbox 发布时间: 2009-02-23

例如：
a{display:black; width:200px; height:30px; backgroud:该图片 no-repeat 位置值1 位置值2 ；}
位置值定的不一样，就能够将该图片不同的部分展现出来

作者: zhaiyu963 发布时间: 2009-02-23

搜css sprite

作者: qxq864298 发布时间: 2009-02-23

图片间最好留一些空白，，方便日后维护。。。。。。。。。

作者: tianyazjq110 发布时间: 2009-02-23

你爱怎么放就怎么放，只要你能定位得到

作者: wolfxyx 发布时间: 2009-02-23

AD贴

作者: iid0019 发布时间: 2009-02-23

谢谢各位了，邪恶de小强说得对这种技术叫css sprite，看来我是落后了，唉！要加油不可能了
优点
我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

缺点
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。

作者: magbox 发布时间: 2009-02-23

img.rar (17.1 KB)

送你个工具组合完之后可自动显示出相应的CSS属性

作者: lijiyu1988 发布时间: 2009-02-24

另外组合成一张图只是减少浏览器的http请求数大站点基本上常用个人感觉并没有多大的提速的效果阿

作者: lijiyu1988 发布时间: 2009-02-24

随便画，最好整齐工整,一对的靠在一起，到时候用firework圈一圈像素就出来了

作者: dc2001 发布时间: 2009-02-24

看这个文章 CSS Sprite网页图片合并合成开源工具下载

作者: bbon 发布时间: 2009-02-24

别听他们胡说，怎么可以随便画？当然是有次序有规律比较好，图片之间稍微留点空隙，不是为了以后加什么，这样看上去排的整齐有节省图片的空间容量的大小，方便以后增大图片。如果内容差不多就放一区块~~~~~~~~还有很多，现在想不起来~~

作者: simonmax 发布时间: 2009-02-24

这么可能是随便放。
这个东西你要考虑到填充的。
随便放一个填充或超大尺寸你就得全重调过。
另外这个维护并不难。你开FW拼，然后存为PNG，以后就修改那张PNG就是了。而且定位也能直接在FW上取。

作者: whiteleaf 发布时间: 2009-02-24

我都对css没什么概念，但我对12 13楼意建同意，
肯定不能乱放啊，这样其不是糊搞啊！

作者: lanyilan15 发布时间: 2009-02-24

我认为经常会有变动的地方就不要归类到一张图上去，现在网络是好很多，不在乎多1-2张图，而且也不是很大

作者: lwid 发布时间: 2009-02-24

css sprite 这种技术很流行！

作者: wxbwyx821 发布时间: 2009-02-24

引用:

原帖由 lijiyu1988 于 2009-2-24 00:19 发表
112522

送你个工具组合完之后可自动显示出相应的CSS属性

多谢了，蜈蚣觉的这个工具很棒！

作者: wxbwyx821 发布时间: 2009-02-24

这个也是我近来想知道的!

作者: menhin 发布时间: 2009-02-24

用图片的坐标定位
像这个，比较简单
http://www.job9151.com/enterprise/publishedInfo.aspx?ID=4554

作者: happy175 发布时间: 2009-02-24

ICON与background等最好分开，还有就是Safari的repeat bug

作者: gigjiajia 发布时间: 2009-02-24

8楼的小工具真好用

作者: DarkTommy 发布时间: 2009-06-04

这个技术现在越来越流行了

作者: chirsjie 发布时间: 2009-06-04

下载看看

作者: happy175 发布时间: 2009-06-04

下载后，用不了

作者: happy175 发布时间: 2009-06-04

8楼兄弟提供的很好！

作者: connery 发布时间: 2009-06-22

这帖子好！犹其那小工具！！感谢大家的分享！

作者: momos 发布时间: 2009-06-23

谢谢小工具，正需要

作者: chen46311973 发布时间: 2009-06-23

的哥撒地方

作者: v6goodv6good 发布时间: 2009-06-23

这个还有一个郁闷的问题 IE6 PNG会出现蓝底
读取速度确实不错但是有些图片没法放在一张上看情况吧

作者: gongqf 发布时间: 2009-06-23

8楼分享的工具打开系统报错啊！！！

作者: shore 发布时间: 2009-06-23

鼓励鼓励～，送你个工具 http://spritegen.website-performance.org/

大范围的 CssSprite 可以配参数和一个自动生成的css文件一起使用的，你可以去看一下facebook的使用方法，或者在网上搜一下。

作者: zerodaily 发布时间: 2009-06-23

8楼的工具赞~！

作者: fishge 发布时间: 2009-06-24

恩，好东西，最近也一直在关注这个技术...

作者: oralq 发布时间: 2009-06-24

不错

作者: alisa8088 发布时间: 2009-08-02

楼主，你的湖南湘湘家教网在FF下有错误……

作者: Hardyy 发布时间: 2009-08-03

感谢8楼兄弟的小工具
感谢楼主开的贴

作者: fengjie926 发布时间: 2010-04-18

大家都说出来了，我当温习了！嘿嘿！

作者: www1918 发布时间: 2010-04-18

先试试。以后呢慢慢就会了。对的 css split.
其实很简单的。

关于图片如何拼合，其实也不是很简单。做多了就可以找到自己的一点方法了。
前面学习无所谓的。

作者: idche 发布时间: 2010-04-19

感谢8楼

作者: jia8429 发布时间: 2010-04-21

8楼兄弟的工具超实用啊！收下了！谢谢！

作者: woowa 发布时间: 2010-04-21

这个我也接触过还没来得及时间好好研究看看的好好学学

作者: idyuan 发布时间: 2010-05-05

应该说越来越普遍了！应该是基本常识！

作者: uk51 发布时间: 2010-05-05

8楼的小工具不错，顶！

作者: cwbqiuyu 发布时间: 2010-06-23

还是习惯了在PS下按F8打开信息窗口，然后用选区工具量。

作者: cczeyun 发布时间: 2010-07-09

CSS雪碧

作者: liuxiaocong 发布时间: 2010-07-09

8楼的小工具很好，要是能在工具中手动调节图片的位置就更好了，因为有些图片需要间隔比较大

作者: rachel83 发布时间: 2010-07-13

八楼的工具怎么用啊？？？求....

作者: cissiyang 发布时间: 2011-01-10

提高页面速度，div css如何用一张背景图实现全站背景图片调用

引用:

热门阅读

热门下载