css sprite简单实例


Posted in HTML / CSS onMay 23, 2016

css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下。

一、什么是css sprites

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用csssprites降低图片数量,带来的将是速度的提升。

css sprites是什么通俗解释:CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

二、适合与不适合CSS sprites拼合布局

1、适合:一般小图标素材

小的图标ico类素材,一般图标很小十多像素几十像素的宽度高度,这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数,但很快加载完又会释放。

2、不适合:大图大背景

大背景一般用于网页背景,拼合时,设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小,网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些,所以大图不推荐拼接拼合来使用css sprites背景定位布局。

3、sprites适合推荐小结

一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等CSS布局。

三、css sprites优势与缺点劣势判断选择

1、sprites优势:

若干小图标拼合成一张图后布局,减少http iis请求数,对于大战大流量网站来说隐形优势很显然的,从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵,使用CSS Sprites这样可以大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因,同时也减少图片文件数目。

2、sprites缺点

在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景,如果留空间或拼合位置不合适,在布局时容易出现布局这个盒子对象时,设置背景出现拼合相邻图片,干扰图片的情况;

CSS Sprites在开发的时候比较麻烦,你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;

CSS Sprites在维护的时候比较麻烦,sprites是一般双刃剑,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐,而且重新算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情

由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。

3、推荐小结

由于拼接图片需要一定经验技巧(做实践即可快速掌握)、测量定位数值、修改不是那么灵活等原因,一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites,因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力,所以不是很推荐小站。但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用,这样比较值得。

四、css sprites实例示例教程

1、素材与要实现效果截图

css sprite简单实例

2、sprites实例教程解释介绍

首先这些图标素材是放在同一张图片上(PS拼合),然后实现成列表类布局,列表每个前图标不同。使用css sprites实现此布局(其实使用background样式实现)。

首先此列表布局我们使用ul li列表布局,每个li站一行排版,对ul设置padding实现四周内容与边框一定间距效果,因为每个li前面图标不同,但此背景图片是拼合在一张图片上,所以这里做li里开始使用span标签实现这个不同图标效果,每个图标不同为了区别span所以对span设置不同class,不同class对应设置定位相应的图标。

3、实例教程准备

1)、初始化模板使用:为了兼容各大浏览器,仍然这里使用网站提供初始化模板,在此模板基础上修改设置符合本实例CSS样式。
2)、图标素材,这里直接为大家提供拼接好的图标素材图片一张,命名为“ico.png”,如下图,可直接另存为保存使用。

css sprite简单实例

4、先布局出效果,再css sprites设置不同背景图标样式

html代码:

XML/HTML Code复制内容到剪贴板
  1. <ul class="Sprites">     
  2.     <li><span class="a1"></span><a href="#">WORD文章标题</a></li>     
  3.     <li><span class="a2"></span><a href="#">PPT内容标题</a></li>     
  4.     <li><span class="a3"></span><a href="#">Excel内容标题</a></li>     
  5.     <li><span class="a4"></span><a href="#">PDF内容标题</a></li>     
  6.     <li><span class="a5"></span><a href="#">文本文档标题</a></li>     
  7. </ul>    

为了区别不同效果对span加入不同class。

css代码:

XML/HTML Code复制内容到剪贴板
  1. ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}     
  2. ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}     
  3. ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;      
  4. overflow:hidden;background:url(ico.png) no-repeat}     
  5. ul.Sprites li a{ padding-left:5px}    

效果截图

css sprite简单实例

css sprites关键代码与解释

首先对ul.Sprites li span引入背景

ul.Sprites li span{ background:url(ico.png) no-repeat} 给span设置css背景图片。

再分别对不同span class设置对于图标背景定位具体值

ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px,向上“拖动”32px开始显示此背景图标

ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px,向上“拖动”32px开始显示此背景图标

ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px,向上“拖动”32px开始显示此背景图标

ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px,向上“拖动”32px开始显示此背景图标

ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px,向上“拖动”32px开始显示此背景图标

关键:背景background-position有两个数值,前一个代表靠左距离值(可为正可为负),第二个数值代表靠上距离值(可为正可为负)

背景background-position有两个数值可以为正可以为负,当为正数时,代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片;当为负数时代表背景图片作为盒子对象背景图片,将背景图片拖动超出盒子对象左边多远,拖动超出盒子对象上边多远开始显示此背景图片。

CSS sprites技巧技术总结

CSS sprites其实就是对CSS背景background样式的扩展应用,以前设置背景background-position常见为正数值,设置背景靠左靠上距离多少像素开始显示图片,为负数值后,是将图片拖离左边上边多少像素开始显示图片,下载本案例多次修改修改数值,观察观察能找到规律很快就会作为此技巧,同时学会PS切片工具获取距离值。

以上这篇css sprite简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.manongjc.com/article/886.html

HTML / CSS 相关文章推荐
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 #HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 #HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 #HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 #HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 #HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 #HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 #HTML / CSS
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
中止javascript执行的方法
2014/02/14 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python decimal模块使用方法详解
2020/06/08 Python
学python需要去培训机构吗
2020/07/01 Python
python interpolate插值实例
2020/07/06 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
一份创业计划书范文
2014/02/08 职场文书
酒店员工检讨书
2014/02/18 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
学生会辞职信
2015/03/02 职场文书
工作简报范文
2015/07/21 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
创业计划书之酒厂
2019/10/14 职场文书