CSS Sprite——雪碧图

CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

CSS 雪碧图技术不是什么新东西，在网页应用中已经有几年了，现在的网页开发在图标图片的应用上已经趋向于使用字体图标，这是一种比CSS雪碧图技术更优雅的图标应用方式。

如下图CSS Sprites样图

CSS知识点：

- background-image
- backgorund-position
特点：
1. 相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
2. 一般情况下，你需要保存为PNG-24的文件格式。
3. 可以设计出丰富多彩的颜色体表。
难点：
1. 你需预先确定每个小图标的大小
2. 注意小图标与小图标之间的距离
3. 细心、耐心

PNG-24的图片格式：PNG-24可减少毛边

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>雪碧图</title>
<style type="text/css">ul{margin:10px auto;width:206px;}.sprite li{cursor:pointer;height:42px;width:206px;background-color:#b51600;border-bottom:1px solid #911001;border-top:1px solid #c11e08;list-style-type:none;margin-left:-45px;}.sprite li a{color:#fff;line-height:42px;font-size:14px;text-decoration:none;}.sprite li s{height:40px;width:24px;display:block;margin-left:10px;margin-right:8px;float:left;background-image:url(image/snow.png)}.sprite li:hover{background-color:#fff;border-color:#fff;}.sprite li:hover a{color:#b51600;}.sprite li:hover s{}
</style>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script>$(function(){var iconH = $(".sprite").find("s").height(),triggerLi = $(".sprite").children("li");//console.log(iconH);triggerLi.each(function(){var $this = $(this),$index = $this.index();//console.log($index)//console.log(iconH*$index);$this.children("s").css("background-position","0 -"+ iconH*$index +"px")$this.hover(function(){// 鼠标移入$this.children("s").css("background-position","-24px -"+ iconH*$index +"px")},function(){// 鼠标移出$this.children("s").css("background-position","0 -"+ iconH*$index +"px")});});//当前页面属于某个功能时，点亮相应菜单项，这里通过地址参数判断，实际项目中应该从后台读取标志var $cat = parseInt(getQueryString("cat"));var poistions = "-24px -"+ iconH*($cat-1) +"px";triggerLi.eq($cat-1).css({"background-color":"#FFF"}).find("a").css("color","red");triggerLi.eq($cat-1).find("s").css({"background-position":poistions});
});
// 获取URL参数
function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); return null;
}
</script>
</head><body><ul class="sprite"><li style="background-position:-24px 0;"  id="1"><s class="s-icon"></s><a href="#">顺丰速运1</a></li><li id="2"><s class="s-icon"></s><a href="#">顺丰速运2</a></li><li id="3"><s class="s-icon"></s><a href="#">顺丰速运3</a></li><li id="4"><s class="s-icon"></s><a href="#">顺丰速运4</a></li><li><s class="s=icon"></s><a href="#">顺丰速运5</a></li><li> <s class="s-icon"></s><a href="#">顺丰速运6</a></li><li><s class="s-icon"></s><a href="#">顺丰速运7</a></li><li><s class="s-icon"></s><a href="#">顺丰速运8</a></li><li><s class="s-icon"></s><a href="#">顺丰速运9</a></li><li><s class="s-icon"></s><a href="#">顺丰速运10</a></li><li><s class="s-icon"></s><a href="#">顺丰速运11</a></li></ul>
</body>
</html>

效果图如下：

源码下载：http://pan.baidu.com/s/1bp2qgaF

CSS Sprite——雪碧图相关推荐

CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
猿人学题库十九题——css加密-雪碧图/数据干扰等——地毯式采坑学习
猿人学题库十四题--css加密-雪碧图/数据干扰等 1. 首先进入浏览器的开发者工具, 打开就是俩个无线debugg,正常的操作过掉 1. 找到 debugg 对应的行数,右击选择 neve ...
CSS 关于雪碧图预处理和后处理方案的讨论
广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到的问题以及解决方案.其 ...
SVG进阶-sprite 雪碧图
前言由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不用分辨率.不用担心模糊和锯齿.同时还能更改图标的填充颜色. CSS sprite 和SVG Sprite 传统的 ...

CSS Sprite——雪碧图

CSS Sprite——雪碧图相关推荐

最新文章

热门文章