CSS精灵图技术

最新推荐文章于 2024-05-16 17:48:19 发布

阳光下的冷静

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量1.7k

点赞数 2

分类专栏： css 文章标签：精灵图技术精灵图技术应用精灵图优缺点

本文链接：https://blog.csdn.net/m0_37686205/article/details/84501516

版权

css 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

什么是CSS精灵技术：css精灵技术，是一种处理网页背景图片的方式,简单来说就是将很多的小图集中在一张大图上，当要使用每一张小图的时候，就直接将大图作为背景，截取小图的部分即可。

CSS精灵技术作用：为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度(将若干个小图集中到一张大图上的过程，这样加载一张大图就加载了所有的小图，避免多次请求服务器)。

CSS精灵技术应用场景：主要是做背景定位

如一张集合所有小图的大图，现在要截取其中的两张小图放在特定的div中。

大图如下图：

精灵图

技术实现代码如下：

<style type="text/css">	
			 h3{
			    background: url(img/index.png) no-repeat -2px -184px  ;
				width: 26px;
				height: 26px;
			   }
			div{
				background: url(img/index.png) no-repeat 0 -350px  ;
				width: 236px;
				height: 106px;
			   }
</style>

<body>
		<h3></h3>
		<div id="">		
		</div>
</body>

上面的代码中最重要的是背景图后面的位置的设置，这个分别是以大图的左上角为参考点，水平距离(大图的左上角和小图的左上角水平距离)大小和竖直距离(大图的左上角和小图的左上角水平距离)大小，由于向右和向下时负方向，所以值都是负的。

也有另外一种代替代码写法：

<style type="text/css">	
			h3{
				background-position:-2px -184px ;
				background-image: url(img/index.png);
				background-repeat:no-repeat ;
				width: 26px;
				height: 26px;
			}
			div{
				background-position:0px -350px ;
				background-image: url(img/index.png);
				background-repeat:no-repeat ;
				width: 236px;
				height: 106px;
			}
</style>
	</head>

	<body>
		<h3></h3>
		<div id="">		
		</div>
	</body>

总结一下就是将一个属性拆分成多个属性，效果是一样的。

效果如下图：

精灵图有其一定的优点和缺点：

优点：

CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节；
CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点：

图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

阳光下的冷静

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS精灵图技术

什么是CSS精灵技术：css精灵技术，是一种处理网页背景图片的方式,简单来说就是将很多的小图集中在一张大图上，当要使用每一张小图的时候，就直接将大图作为背景，截取小图的部分即可。CSS精灵技术作用：为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度(将若干个小图集中到一张大图上的过程，这样加载一张大图就加载了所有的小图，避免多次请求服务器)。CSS精灵技术应用场景：主要是做背景定...
复制链接

扫一扫