css精灵技术
简单的说,css精灵是一种处理页面 背景图像 的方式,它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于页面,这样,当用户访问该页面时只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图
测量时,精灵图一般拿过来第一时间锁起来,不要移动位置,否则网页中的坐标全乱。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 22px;
height: 24px;
background: url(sprite.jpg) no-repeat 0 -100px;
}
</style>
</head>
<body>
<div class="t"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
background: url(align.png) no-repeat;
float: left; /* span 行内元素没有大小 加浮动 或 display: inline-block;*/
}
span:first-child {
width: 64px;
height: 62px;
background-position: 0 0px;
}
span:nth-child(2) {
width: 66px;
height: 62px;
background-position: -142px -144px;
}
span:nth-child(3) {
width: 66px;
height: 62px;
background-position: -198px 1px;
}
span:nth-child(4) {
width: 64px;
height: 62px;
background-position: -203px -300px;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a {
float: left;
width: 260px;
height: 63px;
background: url(wz.png) no-repeat;
background-position: -514px -402px;
text-align: center; /*文字水平居中垂直居中*/
line-height: 63px;
color: #fff;
font-weight: 700; /*字体加粗*/
text-decoration: none; /*取消下划线*/
}
a:hover {
background-position: -223px -402px;
}
</style>
</head>
<body>
<a href="#">奖励兑换</a>
</body>
</html>
想要精确定位到精灵图中某个小图,就需要使用css的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确的定位。
制作精灵图
1.精灵图上放的都是小的装饰性质的背景图标,插入图片不能往上放
2.精灵图的宽度取决于最宽的那个背景
3.可以横向摆放也可以纵向摆放,但是每个图片之间,间隔至少隔开偶数像素合适
4.精灵图的最低端,留一片空隙,方便我们以后添加其他精灵图
注意: 小公司,背景图片很少的情况下,没必要使用精灵技术,维护成本太高。如果背景图片比较多,可以建议使用精灵技术。
FNG-24
一般logo为背景图片
字体图标
图片会增加总文件的大小,还增加很多额外的“http请求”,这都会大大降低网页的性能,并且图片不能很好的进行“缩放”,因为图片放大和缩小会失真。字体图标(iconfont)对此很有帮助
字体图标优点:
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等
但是本质其实是文字,可以很随意的改变颜色、产生阴影透明效果等
本身体积很小,但携带的信息并没有削减
几乎支持所有浏览器
移动端必备良药…