X.Tian

X.T

CSS Sprites

说白就是用样式表切一个大图片

现在很多好的网站都是这么写,然后很多位置的小图片,其实就是用一张大图片,其优点就是一次URL请求就行了,加快网站访问速度

1

这个就是切片工具可以直接导出下图框框中的内容

2

这个是切片工具 全部拆分切开 用CSS精灵的方式合并到一起就ok了

3

这里就是CSS精灵的写法 全用的一张图片 默认是 图片的位置是你div的左上角开始,我们用background-position,给他向左,向上移动一下 ,显示效果就变了,将会显示不同位置的图片,有些地方需要做平铺,所以我是横着切图的,最终文件就是那个res.png

那么如何判断位置到底是多少?

用PS的切片工具,可以直接看到位置和宽高

4

 

————————————————————————————————————

我平时看起来好像很高调的样子,其实现实生活中很低调的,既宅又懒,也很懒的交新朋友,因为觉得经营好一种关系是很费心的一件事情, 话说不比真不知道自己就是个大菜鸟,什么都不知道, 我好庆幸认识我友链的那群大神们哦,教会我好多,这也是我为什么喜欢玩博客的原因之一, 会有共同话题, 共同语言。

真心谢谢你们 不嫌弃我笨 啦啦  好爱你们

2014年7月9日 8 / /
标签:  暂无标签

评论回复

  1. 回复 Michael

    我有个问题,那么多小图片合成一张大的图片你们是用Photoshop还是用一些现成的网站去做?谢谢回复。 :smile:nn1

  2. 回复 ONEO

    :smile: 郭大萌学会了吧这个

    • 回复 xtian.me

      @ONEO :oops: 哈哈 嗯 好玩好用

  3. 回复 HOUZI

    :smile: :smile: 不错哟!美丽

  4. 回复 SmallFork

    图片转换为样式表 :roll:

  5. 回复 安琪飞扬

    这个方法在使用是非常方便,img目录就不用放很多图片了

  6. 回复 千樟

    很有用的知识呢,楼主亲身实践后分享,32个赞

  7. 回复 mars

    这样如果有很多高清图应该就不行了。该显示图片的地方在图片完全加载出来之前看不到那用户体验就会变差

6 + 3 =

回到顶部