我們在研究其他的網站的樣式的時候經常會發現一種情況，就是在很多background屬性里都調用同一張圖片，來滿足網頁各個部分的使用。打開這種圖片看一下，會發現這張圖片上包含了很多小圖片;

這些小圖片就是整圖分割后的各個部分，把各個部分放在一張圖片上，而不是是分別存儲成單獨的圖片，其目的我們都知道，就是減少http請求次數，節省時間和帶寬。

那么怎么來實現一張圖片在不同的地方只顯示其中的一部分呢，這就用到了我們今天要說的背景圖片的定位問題。這個問題相信很多人都郁悶過，也經常有朋友問我，所以今天就系統的說一下：

我們知道在用圖片作為背景的時候，css要這樣寫，以div容器舉例子，也可以是body、td、p等的背景，道理一樣。

div{ background:#FFF url(image) no-repeat fixed x y;}

這里的background的屬性值依次為：

#FFF?背景色：（顏色值，背景圖片沒有覆蓋的地方，或者沒有背景圖片時表現的背景色）
image?背景圖片：（這里是圖片的地址）
no-repeat?是否重復：（圖片小于容器的大小時，默認會重復排列圖片以填滿容器，no-repeat表示不重復，只有這個時候后面的定位坐標才有用。）
fixed?背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，默認是scroll）
x y?背景圖像的定位：（注意，只有在no-repeat下定位才有意義。這個就是今天要講的重點）

?http://www.jb51.net/css/23213.html

背景圖像的定位：坐標值，百分比，關鍵字。

---

暫且擱置 稍后研究。

?

轉載于:https://www.cnblogs.com/langlang149/p/5583740.html

總結

以上是生活随笔為你收集整理的CSS background属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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