CSS Sprite

最新推荐文章于 2022-10-29 22:59:58 发布

wzl454823

最新推荐文章于 2022-10-29 22:59:58 发布

阅读量83

点赞数

分类专栏： CSS 文章标签： CSS 网络应用应用服务器 XHTML HTML

本文链接：https://blog.csdn.net/wzl454823/article/details/83738929

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。
我的理解就是将网页中需要的一些比较细致的图片，放在一张透明图片里，利用background-position：-xpx,-ypx;属性来定位图片，用图片本身的css属性控制大小，从而实现从一张大图片中取到需要的小图片。


<!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">
.box1,.box2,.box3,.box4{
	background:url(bg2008050703.png);
	width:100px;
	height:100px;
	}
.box1{
	background-position:0 0;
}
.box2{
	background-position:0 -100px;
}
.box3{
	background-position:0 -200px;
}
.box4{
	background-position:0 -300px;
}
</style>
</head>

<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>