请问怎么将 图片组合为 CSS 贴图定位

html-css059

请问怎么将 图片组合为 CSS 贴图定位,第1张

用图片做背景.... 举个例子，假设一个网页上有3个不同的button，每个按钮分别用一张不同的图片做背景，这样就需要三张小图片。为了减少请求次数和时间，可以把三张图片放到一张大图中。 再分别把三个button的背景定位到指定的区域。 格式是background-position:100px 50px分别是x和y方向的位移。 或者background:url(xxx) 100px 50px你可以想象你要显示的那一块是一个窗口，图片在窗口后面，你要通过移动图片来让窗口显示你要看到的那一部分。不过两个窗口之间是不会有影响的。

希望采纳

可以：减少http连接请求

因为你网页中每引入一个图片、css文件、js文件或引入的其他什么东西都会产生一个http连接

坏处是图片、css代码的管理、修改难度增加

而切这种方法用到 a:hover 方式来切换按钮背景图之类的，在ie(没实测，应该是大多数版本ie)下依然会产生多个http连接请求，得不偿失。

这个技术你了解就行了，如果你网站浏览量没大到每分钟几千上万，你的服务器是包月\年的，不是门户那样一年花几百上千万包的带宽的话，你大可不必用这个办法，少几个http请求多几个http请求对小站来说，访问速度没有明显影响，没必要为快那0.0x秒去把可维护性降低，每天多那么一两M的数据量你又不必另外付钱。