源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] CSS Sprite的一些最佳实践方法

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2009-9-16 00:54:08 | 显示全部楼层 |阅读模式
众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。今天我们通过一个实例来学习CSS Sprites的使用方法。

下面是一张样图:

  


图片1

  本文的目的并不是讲CSS Sprite如何让一个网站更快,而是说一些使用CSS Sprite的时候的一些最佳实践。

  不要等到你完成切片之后才开始sprite.

  如果你边切图边写CSS,然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中,你就不得不完全重写你的CSS,你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合,就会比较容易些。

  把图片放到它要显示的地方的相对的地方

  这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如,如果我们希望一个图片出现在一个元素的左侧:

  Sprite positioning example

  将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话,当你通过CSS移动背景图片的位置的时候,基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

  定位时避免使用bottom或right等

  当使用CSS sprite的时候,只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的,但是问题是,当你在宽度上或高度上扩展相关sprite图片的时候,原先设置的位置可能是错的,因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

  给每个图片足够的空间

  就像你在本文顶部的实例图片看到的那样,那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢? 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距,以至于其它图片不会意外出现。

  例子:

  Variable content example

  例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片,你可以看到这三个数字图片是如何错开排列的,这样如果内容增多,其它图片就不会意外出现。

  不用担心Sprite图片的像素大小

  如果你的网站经过良好的设计,那么你将会有一大堆的图片来整合进到sprite里面,这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。

回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-23 19:11:50 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-28 01:52:41 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

9

主题

2万

回帖

420

积分

中级会员

Rank: 3Rank: 3

积分
420
发表于 2022-12-4 15:27:11 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

301

积分

中级会员

Rank: 3Rank: 3

积分
301
发表于 2022-12-15 22:10:45 | 显示全部楼层
刷屏刷屏刷屏
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-10-25 06:20:17 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2023-11-27 12:57:42 | 显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

93

积分

注册会员

Rank: 2

积分
93
发表于 2024-3-17 12:40:03 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-24 17:13:16 | 显示全部楼层
怕怕怕怕怕怕怕怕怕怕怕怕怕怕
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

61

积分

注册会员

Rank: 2

积分
61
发表于 2024-3-26 16:21:58 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-30 02:42 , Processed in 0.065614 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表