CSS的另类拼图___减少HTTP请求
作者：zishu 来源：zishu博客 时间：2009-05-28 19:05:00
减少HTTP请求，是可以提高网站速度的，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分，这是很多网站一直的作法。但是这些应用大多是应用于元素的背景中，很少有人把LOGO放在这里边，就是放了也比较难显示出来。今天看了GOOGLE的的作法，恍然大悟，他真的很聪明。
他的代码写的比较多，我简化了一下，自已写了一个实验版本，供参考：
首先，我把一个网页中所有的图片都放在了一个图片中，如下图，注意，LOGO也在里边；
CSS部分的代码为：
<style>
#logo{ width:154px; height:61px; overflow:hidden; float:left}
#logo img{ margin-top:-317px; border:none;}
GOOGLE是用的相对定位再用绝对定位弄的，我感觉那种作法有些麻烦，而且在复杂布局是会引出更多新的问题，所以我用的是margin，这样不会影响到其它地方的布局。我也推荐大家这样用。
布局部分：
<div id="logo"><a href="http://www.zishu.cn">
<img src="https://img.aspxhome.com/file/UploadPic/20095/28/w200952123340-79.gif" alt="zishu" /></a></div>
再看一个完整的例子，这是LOGO加背景的一种写法：
标签：http,性能,css,拼图
0
投稿猜你喜欢
JavaScript 学习 - 提高篇
2024-04-30 08:54:46
Python数据分析之Python和Selenium爬取BOSS直聘岗位
2021-04-27 08:53:19
Mysql 数据库双机热备的配置方法
2010-06-09 19:13:00
python中有关时间日期格式转换问题
2023-03-17 07:43:12
如何完美的建立一个python项目
2021-02-20 21:07:26
JS验证逗号隔开可以是中文字母数字
2024-04-19 10:48:08
MySQL中出现乱码问题的终极解决宝典
2024-01-27 15:03:30
python实现批量获取指定文件夹下的所有文件的厂商信息
2021-12-14 20:42:27
Python后台开发Django会话控制的实现
2022-11-09 22:29:16
python调用DLL与EXE文件截屏对比分析
2022-06-01 08:19:15
Python如何设置指定窗口为前台活动窗口
2022-01-22 02:20:02
php5.3 不支持 session_register() 此函数已启用的解决方法
2023-11-16 01:59:39
selenium使用chrome浏览器测试（附chromedriver与chrome的对应关系表）
2022-08-16 16:42:00
Symfony学习十分钟入门经典教程
2023-11-14 23:38:38
解决golang.org不能访问的问题(推荐)
2024-05-08 10:53:22
python+pyqt5实现KFC点餐收银系统
2022-02-05 08:49:46
Python实现PDF转换文本详解
2022-09-04 13:40:52
Python中的元类编程入门指引
2023-08-02 02:43:44
Python变量和字符串详解
2023-08-23 02:59:49
vue实现验证码倒计时按钮
2024-04-09 10:49:05
