css精灵技术

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)对此很有帮助
字体图标优点:
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等
但是本质其实是文字,可以很随意的改变颜色、产生阴影透明效果等
本身体积很小,但携带的信息并没有削减
几乎支持所有浏览器
移动端必备良药…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值