雪碧图 Sprite图

CSS Sprite雪碧图

静态图片，不随用户信息的变化而变化
小图片，图片容量比较小（3k - 5k）
加载量比较大大图不建议拼成雪碧图

基本目的：有效的减少http请求数量，加速内容显示（因为每请求一次，就会和服务器链接一次，建立链接是需要额外时间的）
实现原理：基于CSS background-position属性控制通常来讲，设置一个区域的背景图，然后来控制背景图位置实现功能
我们可以通过坐标系来看（更加清晰）：

控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图滑动
实现方式：
1.PS手动拼图
2.使用sprite工具自动生成 -->CssGaga、Css Sprite Tools

工具使用步骤
①、用ps把小图片切好
②、打开软件

③、打开图片
点击左上角的“选择多幅小背景图片”，选择多张图片，点击打开
④、排布图片
可以选择上面的最上面按钮今天横竖的默认排布，也可以鼠标选中图片拖动位置，拖动完成后程序会根据内部图片的位置生成面积最小的雪碧图，当然也会改变相应的图片位置
⑤、代码生成
点击“选择目录并生成测试文件”按钮
所需要的代码就在css/bgs.css文件里面
所需要的图片在imgs里
例如：

<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{margin: 0;
padding: 0;
}
h3 {display: block;margin: 0;padding: 0;
}.cat {position: relative;width: 150px;background: #f8f8f8;border: 1px solid #bbb;
}ol, ul {list-style: none;
}li {z-index: 2;position: relative;display: block;height: 31px;line-height: 31px;overflow: hidden;margin: 1px 10px 0;vertical-align: bottom;border-bottom: 1px solid #dedede
}li h3 {font-size: 14px;font-weight: 400;
}li i {background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);/* 注意url使用自己的路径*/display: inline;float: left;margin: 3px 10px 0 0;height: 24px;width: 30px
}</style>
</head>
<body><div class="cat"><ul ><li><i></i><h3>服装内衣</h3></li><li class="cat-2"><i></i><h3>鞋包配饰</h3></li><li class="cat-3"><i></i><h3>运动户外</h3></li><li class="cat-4"><i></i><h3>珠宝手表</h3></li><li class="cat-5"><i></i><h3>手机数码</h3></li><li class="cat-6"><i></i><h3>家电办公</h3></li><li class="cat-7"><i></i><h3>护肤彩妆</h3></li><li class="cat-8"><i></i><h3>母婴用品</h3></li></ul></div>
</body>
</html>

<html>
<head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><style>blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{margin: 0;padding: 0;}h3 {display: block;margin: 0;padding: 0;}.cat {position: relative;width: 150px;background: #f8f8f8;border: 1px solid #bbb;}ol, ul {list-style: none;}li {z-index: 2;position: relative;display: block;height: 31px;line-height: 31px;overflow: hidden;margin: 1px 10px 0;vertical-align: bottom;border-bottom: 1px solid #dedede}li h3 {font-size: 14px;font-weight: 400;}li i {background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);display: inline;float: left;margin: 3px 10px 0 0;height: 24px;width: 30px}.cat-1 i{background-position: 0 0;}.cat-2 i{background-position: 0 -24px;}.cat-3 i{background-position: 0 -48px;}.cat-4 i{background-position: 0 -72px;}.cat-5 i{background-position: 0 -96px;}.cat-6 i{background-position: 0 -120px;}.cat-7 i{background-position: 0 -144px;}.cat-8 i{background-position: 0 -168px;}.cat-9 i{background-position: 0 -192px;}</style>
</head>
<body><div class="cat"><ul ><li><i></i><h3>服装内衣</h3></li><li class="cat-2"><i></i><h3>鞋包配饰</h3></li><li class="cat-3"><i></i><h3>运动户外</h3></li><li class="cat-4"><i></i><h3>珠宝手表</h3></li><li class="cat-5"><i></i><h3>手机数码</h3></li><li class="cat-6"><i></i><h3>家电办公</h3></li><li class="cat-7"><i></i><h3>护肤彩妆</h3></li><li class="cat-8"><i></i><h3>母婴用品</h3></li></ul></div>
</body>
</html>

雪碧图 Sprite图相关推荐

python多张图片合并拼接，python制作sprite图、雪碧图
python多张图片合并拼接,python制作sprite图.雪碧图整理图片集找两个文件夹,yangying和zhaoliying,分别放上照片8张,共16张照片. 创建sprite.py # 多 ...
【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
前端开发工具介绍----合成雪碧图工具（css sprite）
合成雪碧图Sprite工具 1.国外的在线合成工具:http://csssprites.com/ 选择需要合并的文件----设置option选项(包括:元素的间距,排列方式,背景颜色,边框)----- ...
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
SVG进阶-sprite 雪碧图
前言由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不用分辨率.不用担心模糊和锯齿.同时还能更改图标的填充颜色. CSS sprite 和SVG Sprite 传统的 ...
sprite（雪碧图，也叫精灵图）
1.css sprite 中文名为雪碧图,也叫精灵图,是基于background-image和background-position 实现的显示技术就是将一个有很多图标的图片,通过控制图片显示位置 ...
CSS3 帧动画（Sprite，直译叫雪碧图）
CSS雪碧 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 C ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

雪碧图 Sprite图

CSS Sprite雪碧图

雪碧图 Sprite图相关推荐

最新文章

热门文章