div+css 怎么通过这一张图片来进行整个版面的设计呀？

html-css022

div+css 怎么通过这一张图片来进行整个版面的设计呀？,第1张

二楼说的很对。通过精准的背景图片定位功能来使用，我们通常把这种方法叫“CSS Sprites”，高前端开发的人大多习惯神飞老师的叫法，叫它“CSS雪碧”。

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(值得一提的是，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签)。

这种方法已经广泛的应用到了众多的网站上，如果想学习，可以参考一下GOOGLE、Tencent等知名网站的CSS，相信你会获益匪浅。

我认为这里的篇幅太小，详细的了解及操作方法，建议去这些地方学习：

1、CSS雪碧操作方法视频讲解 http://www.aa25.cn/div_css/896.shtml

2、前端观察神飞：CSS雪碧:要还是不要？ http://www.qianduan.net/to-sprite-or-not-to-sprite.html

3、CSS雪碧在线生成器 http://www.tulongzhiji.com/mopvhs/2010/08/26/css-sprite-generator%E4%B8%A8css%E9%9B%AA%E7%A2%A7%E5%9C%A8%E7%BA%BF%E7%94%9F%E6%88%90%E5%99%A8/

4、CSS雪碧是鱼翅还是三鹿 http://www.qianduan.net/css-sprites-useful-technique-or-potential-nuisance.html

5、CSS雪碧的一些实用技巧 http://www.qianduan.net/css-spriting-tips.html

方法1.用ps或者dw把需要的图片切下来，自己通过ps，把需要的图片整合拼合成一张图片。在利用css中的background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置，当然这种效率是最慢的一种。

方法2.最简单的一种。（推荐用这种）把需要的图片用ps切出来，然后在线生成http://www.cn.spritegen.website-performance.org/ 只要把需要的图片放在里面，即可生成你需要的css代码。