html实战3--精灵图

一张图片上有很多小图案，国内称之为‘精灵图’，国外常称之为‘雪碧图’。是一种CSS图像合并技术。
该方法是将小图标和背景图合并到一张图上，然后利用CSS的背景图定位来显示展示的图片部分。
简单说就是，在一张图片中，分割出一部分自己想要的进行展示。
优点：减少加载网页图片对服务器的请求次数；
提高页面加载速度。

	<style>
		*{
			margin: 0;
			padding: 0;
		}
	div{
		width: 200px;
		height: 200px;
		border:10px solid rgba(0,0,0,0.2);
		/*ragb透明度加上才可看到效果*/
		margin: 100px autoS;
		background:url(./img/精灵图.jfif) no-repeat;
		background-position:0px,-200px; 
		/*想要获取的图片为原来的一半，则原图包括背景图定位数据以及显示的图标宽度与高度均为原来的一半*/
	}
	</style>

html实战3--精灵图

原文：https://www.cnblogs.com/tingshu/p/14408658.html