活用 CSS backgrounds 做滿版背景 (上)

Photo by Joanna Kosinska on Unsplash

設計網頁版型的時候，經常會用一張滿版圖片來作為主視覺，以 CSS backgrounds 加入背景圖的方式來進行，而其中最常用的屬性有：

• background-image
• background-repeat
• background-color
• background-position
• background-size

使用 background-repeat 節省背景圖檔容量

今天，就來談談，background-image, background-repeat, 與 background-color 的交互搭配應用，以及能如何節省背景圖檔的容量！

在製作素面背景的時候，假設有一張背景圖的大小為寬 1200 px、高 675 px，當這張圖整張上傳的時候，檔案大小為 154KB。乍看一張背景圖檔不過區區是 154 KB 的大小，不是特別有感，但假設你的網頁每天有 300 人次瀏覽，光一天下來，這一張圖檔就佔掉你網頁中 46MB 的流量了，長期累積下來也相當驚人，因此思考如何節省檔案空間也是網頁版面設計中需要考量到的事。

▲ 一整張寬 1200 px、高 675 px 的背景圖

當遇到這樣的情況，建議可以先在 Photoshop 用切片工具把背景圖切一小段下來，經過切圖之後的背景圖檔，只剩下一小塊約 21KB 左右的檔案大小，接著再使用這張裁切後的小圖，就同樣能達到原先直接用 background-image 置入一整張大圖的效果，還能節省一些流量！

不過，當容器內有文字，版面自動向下擴充時，由於背景的顏色有漸層，會產生畫面中顏色不連續的情形。

▲ 由於背景的顏色有漸層，導致畫面中背景色不連貫

須特別注意，裁切後的小圖要搭配 background-repeat: repeat-x，以 X 軸重複顯示的方式來填滿視窗的背景，另外同時也要記得吸取不連續段落之間最下方的顏色，作為整個瀏覽器的背景底色，解決顏色不連貫的問題！

最後，來總結一下：

善用 background-repeat 節省檔案大小

用背景圖進行版面設計時，必須考量到網頁效率問題，畢竟一張大的圖檔是很吃容量的，能預先考慮到背景圖該如何裁切能使其容量最精簡，對使用者來說，瀏覽網頁效率也能提高：

background-repeat: no-repeat; 大張圖檔，只顯示一次
background-repeat: repeat-x; 以X軸為基準重複
background-repeat: repeat-y; 以Y軸為基準重複

交互運用 background-color 與 background-image

當高度沒有寫固定，背景會隨容器中的內容增加而自動向下延伸，導致背景顏色出現不連貫時，可以填入 background-color 作為容器中背景圖的延伸，以求整體版面一致性。