CSS精靈圖技術

陽光下的冷靜發表於2018-11-25
CSS

什麼是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>

總結一下就是將一個屬性拆分成多個屬性，效果是一樣的。

效果如下圖：

精靈圖有其一定的優點和缺點：

優點：

  1. CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的效能，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
  2. CSS Sprites能減少圖片的位元組；
  3. CSS Sprites解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片命名，不需要對每一個小圖片進行命名，從而提高了網頁製作效率。
  4. CSS Sprites只需要修改一張或少張圖片的顏色或樣式來改變整個網頁的風格。

缺點：

  1. 圖片合併麻煩：圖片合併時，需要把多張圖片有序的合理的合併成一張圖片，並留好足夠的空間防止版塊出現不必要的背景。
  2. 圖片適應性差：在高分辨的螢幕下自適應頁面，若圖片不夠寬會出現背景斷裂。
  3. 圖片定位繁瑣：開發時需要通過工具測量計算每個背景單元的精確位置。
  4. 可維護性差：頁面背景需要少許改動，可能要修改部分或整張已合併的圖片，進而要改動css。在避免改動圖片的前提下，又只能（最好）往下追加圖片，但這樣增加了圖片位元組。

 

相關文章