合并圖片，用CSS切割以減少圖片請求次數

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

html,body,h3 {}{
font-family:Verdana,Arial;
font-size:12px;
}
div {}{
overflow:hidden;
}
#list {}{
width:198px;
}
.top {}{
background:url(skin/bg_01.gif) left top no-repeat;
}
.top h3 {}{
margin:0;
height:30px;
line-height:30px;
text-indent:5px;
}
.mid {}{
border-left:1px solid #aaa;
border-right:1px solid #aaa;
padding:5px;
}
.bot {}{
height:6px;
background-position:left bottom;
}

原圖：

為了加快頁面訪問速度，我們可能會想到多種可行的辦法：如提升硬性條件方面的效能、減少HTTP請求次數，使用Cache，合并檔案（aoao總結的把js和css合并成一個檔案非常好玩）等等。

這裡主要講一下如何節省圖片的請求次數，至於如何能減少圖片請求，不外乎就是減少實際圖片的數量和代碼的編寫品質。

我們可以把一些不經常變動的架構圖片由原來分割成的多張小圖合并成一張，然後通過CSS背景切割來加快完成渲染，這樣就減少了實際圖片的數量，也就減少了部分圖片請求。

如下面這個圓角架構的處理：

［效果示範：http://www.doyoe.com/model/xhtmlcss/style/cssimg/1.htm］

CSS部分：

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|edzmaster@gmail.com" />
<title>DY Css圖片切割</title>
</head>
<body>
<div id="list">
<div class="top"><h3>頂部邊框（標題）</h3></div>
<div class="mid">本文<br />大段本文內容</div>
<div class="bot top"></div>
</div>
</body>
</html>

以往做圓角的東東，一般可能會做成2，3張圖片。而可以看到，這個例子僅用了一張圖片，所以也會減少不少圖片請求。

先看一下CSS是如何寫的：首先在.top中定義了背景圖片，這是自然的，要用背景肯定得定義背景圖片，這是天經地義的，這裡肯定沒有什麼出採的地方。主要看底部的邊框是如何定義的：可以看到，我為底部邊框單獨定義了一個.bot樣式，但可以發現，裡面只一個控制背景圖的position樣式和高度的東東，甚至連背景圖也沒定義，此疑問一？

暫且放下css不看，先看xhtml部分的底部是如果寫的，可以看到，我為底部賦了兩個樣式class="bot top"。這也就解了疑問一的惑，為什麼.bot裡面連背景圖也不定義，只定義一個位置和高。這是因為.top裡面已經定義了背景圖，所以只需要在底補同時引用.top和.bot兩個樣式就行了，它會同時被這兩個樣式渲染。

這樣寫就省下了在.bot裡再定義一次背景，減少了一次圖片請求，也減少了不少位元組哦：）

再一個疑問就是中間部分是如何解決邊框問題的。可以看到，只需要定義左右兩邊的border就可以搞定。

至此，關於合并圖片，並利用CSS進行背景切割以減少請求的簡單例子就搞定了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More