一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)

简介: 一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)

一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)

一、什么是雪碧图?

雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到 所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,由从前的多次请求变为一次请求,客户端显示一张图片都会向服务器发送请求,所以图片请求越多,造成延迟的可能性就越大,当页面有许多字体图标时,推荐使用CSS Sprite 。

想必大家都用过雪碧图吧,话不多说,看看雪碧图是啥玩意儿:

看看金立官网的雪碧图:


二、那么,使用雪碧图(CSS Sprite)有哪些优点呢

  • 减少图片的字节数。
  • 减少了网页的HTTP请求,从而大大提高了页面的性能。
  • 解决了网页设计师在图片命名上的困扰,只需要对一张集合的图片的命名就可以了 不需要对每一个小元素进行命名,从而提高了网页的制作效率。

三、如何使用雪碧图(CSS Sprite)

(1)需要一个设置好宽和高的容器

(2)通过background-image引入背景图片,注意:图片可以撑开容器,但背景图片不能撑开容器,所以一定要设置宽高。

(3)通过background-position:x,y;(X和Y一般都取负值)把图片背景移动到自己需要的位置,当只取一个值的时候,第二个值默认居中。

四、如何调试

可以通过浏览器自带的调试工具进行调试(如chrome浏览器按F12)即可进行调试,慢慢移动背景background-position的值来达到理想的效果。

五、沙场练兵

我就拿金立的那张图来做个案例吧

PS:前期做的时候先设置大概的宽度,实在不行就打开调试工具,感觉也挺方便的


相关文章
|
2月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
18 1
|
前端开发
CSS Sprite 优点
CSS Sprite 优点自制脑图
50 0
CSS Sprite 优点
|
缓存 前端开发 容器
css steps 动画的使用 - 雪碧图动画
之前在时间函数那篇文章里有写到 css 动画除了支持贝塞尔曲线绘制平滑动画外,还支持使用 steps 来绘制定格/逐帧动画,但是一直没想到使用场景,直到前两天在网上看到一篇说合金弹头的帖子,突然想起来可以使用逐帧动画配合雪碧图,就可以很轻松的实现游戏中常见的雪碧图动画了,说干就干,下面我们一起来试一下。
|
前端开发
CSS——CSS精灵技术(sprite)※
CSS——CSS精灵技术(sprite)※
187 0
CSS——CSS精灵技术(sprite)※
|
前端开发
css sprite雪碧图制作,使用以及相关,图文gif。
在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。本文主要内容包括雪碧图如何制作,雪碧图优缺点,哪些场景需要使用雪碧图。 实现原理: CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义.
264 0
css sprite雪碧图制作,使用以及相关,图文gif。
|
Web App开发 前端开发 .NET
一起谈.NET技术,在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
  前几天MS的ASP.NET小组推出了一个小组件:Sprite and Image Optimization Framework,用于生成Sprite CSS,及将小的图片生成一副大图。   下载地址:http://aspnet.codeplex.com/releases/view/50140   8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59   下载后工程中有一个类库,一个ASP.NET WebForm示例以及一个ASP.NET MVC示例。
1291 0
|
前端开发 算法
|
Web App开发 前端开发
|
Web App开发 前端开发 缓存
|
前端开发
CSS雪碧,即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS。 HTML代码 .img{background:url(img.
876 0

相关产品

  • 云迁移中心