之前就知道了用一張圖片來設置頁面內的所有背景的技術。原理很簡單，利用background-potision精確地定位到圖片的位置。好處是減少頁面 的http請求數。

老實說，我并不覺得這個技術有多值得推廣。雖然是減少了http請求數，但對于99%的網站來說，這個改進基本是看不見的。除了超一流的大網站，流量巨 大，減少http請求數可以看到效果，絕大多數的網站根本不需要這個技術。相較于它帶來的幾乎看不見的好處，它帶來的壞處卻很多。首先，要把所有小圖片集 中到一張大圖片上，這多了一個步驟，而圖片之間的位置一旦定好很難進行改動，因為如果一旦要改動一個圖片的位置，帶來的是一系列圖片位置的調整，整個頁面 的背景可能會全部崩潰！！！是全部！！！也就是說，它的維護成本，還有適應性都非常地差！而圖片之間的擺放，如何讓頁面內的小圖標能最密集地排列從而讓整 張圖尺寸能盡可能地小也是要考慮的問題，很頭疼。

再來講講技術實現上的難點。一個很關鍵的問題是，精確定位圖片的位置并不算完，圖片的平鋪和容器的大小自適應才是一個讓人很頭疼的問題。也就是說，如果一 個容器的大小很大，而我們對這個容器設的背景很小，我們就要考慮到，如果這個容器大背景一定會平鋪，會影響我們的效果。我們可以設置no-repeat來 禁止背景平鋪，可是如果容器的大小大到超出了我們設置的最大值，會不會把旁邊的圖片拉過來接著做背景呢？一個解決方案是給每個自適應大小的容器，在放置背 景圖的時候，盡量給背景圖周圍留下足夠大的空白區?？墒侨绱艘粊?#xff0c;小圖片們就會很零散地聚在大圖片中，和我們想要讓“圖片密集地集中在一塊兒”的目的相違 背。

怎么辦呢？今天看了一下應用這個技術的站點，發現原來他們用了一個1 * 1像素的透明gif圖片！這是個很有趣的方法。如果一個大容器中需要一個小圖片做背景，他們不會直接對大容器設背景，然后留大量空白，而是給那個1*1的 gif圖片取個class或者id，用css控制它的大小和背景。這用得很巧妙。因為對于塊級元素來說雖然可以定義大小和長寬，卻是獨占一行的，如果用 float來讓它和其它行內元素呆在一行的話，還需要清除浮動等等，很麻煩。如果是行內元素，卻又沒辦法設置長寬。很好用的inline-block卻得 不到IE6的支持，為了兼容我們又不能對元素設置display:inline-block; 好在IE雖然不支持css設置display:inline-block;引擎里卻還是對一些元素提供這樣的樣式支持，包括img,input和 table都是這樣的元素。用1*1象素的gif來設置長寬和背景，這樣一來，就可以實現display:inline-block了。

總結一下，技術真相是什么呢？就是利用1 * 1像素的透明gif圖片來實現大容器中的小背景。

總結

以上是生活随笔為你收集整理的css用一张大图片来设置背景的技术真相的全部內容，希望文章能夠幫你解決所遇到的問題。

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