background背景圖

?

屬性解釋

• background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個復合屬性，它可以分解成如下幾個設置項：

background-color 設置背景顏色

background-image 設置背景圖片地址

background-repeat 設置背景圖片如何重復平鋪 x/y軸平鋪

background-position 設置背景圖片的位置 負值向上，正值向下。

background-attachment 設置背景圖片是固定還是隨著頁面滾動條滾動 fixed不浮動、scroll、auto浮動

?

屬性連寫

• 實際應用中，我們可以用background屬性將上面所有的設置項放在一起，而且也建議這么做，這樣做性能更高，而且兼容性更好，
• 比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，
• 這里面的
• “#00ff00”是設置background-color；
• “url(bgimage.gif)”是設置background-image；
• “no-repeat”是設置background-repeat；
• “left center”是設置background-position；
• “fixed”是設置background-attachment，
• 各個設置項用空格隔開，有的設置項不寫也是可以的，它會使用默認值。

?

雪碧圖、精靈圖sprite（一張大圖有多個小圖

通過調節背景圖的位置，主要節約cpu減少請求次數，提升用戶體驗性

總結

以上是生活随笔為你收集整理的前端：background背景图的全部內容，希望文章能夠幫你解決所遇到的問題。

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