一張圖片上有很多小圖案，國內稱之為‘精靈圖’，國外常稱之為‘雪碧圖’。是一種CSS圖像合并技術。
該方法是將小圖標和背景圖合并到一張圖上，然后利用CSS的背景圖定位來顯示展示的圖片部分。
簡單說就是，在一張圖片中，分割出一部分自己想要的進行展示。
優點：減少加載網頁圖片對服務器的請求次數；
提高頁面加載速度。

	<style>
		*{
			margin: 0;
			padding: 0;
		}
	div{
		 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--精灵图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。