前端工程師必學CSS背景五個常識(五)-如何設定背景圖樣?
除了純色背景之外，前端工程師也可以選擇使用背景圖樣設定(background-image)屬性，使用圖片取代純色作為網頁的背景。若網頁的主題不複雜的話，高質感的圖片可以讓網頁整體看起來更加豐富！使用圖片當背景需要注意網頁在不同的平台(如電腦、手機等裝置)，顯示出來的效果是不一樣的！最後必須要確認背景圖片是否能夠與網頁主體和諧搭配得巧妙，且也要避免出現喧賓奪主的失誤。
背景圖樣設定 (background-image)屬性跟背景顏色設定 (background-color)屬性一樣，能夠設定的範圍除了網頁背景外，前端工程師也可以用之來設計網頁內元素，如表格、DIV 區塊、H1-H6 等的背景圖樣，更可與背景重複屬性(background-repeat)、背景固定模式屬性 (background-attachment)、背景圖片位置屬性 (background-position)搭配做網頁設計。
CSS background-image 基本語法如下：
background-image: url("圖片URL位址");
其中 url 小括號內有三種可以使用的參數，分別為 none（預設值，不顯示圖樣）、inherit（繼承自上一層的圖片）以及本例的「 url("圖片URL位址") 」圖片網址這三種。以下有兩個範例分別為設定整個網頁的背景圖片以及網頁內元素的背景圖片。
CSS background-image 語法範例一、網頁背景
background-image: url("圖片URL位址");
CSS background-image 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景圖案設定
div(可替換成 h1、p 等網頁元素標籤){background-image: url("圖片URL位址");}
以上的範例中有兩個不同的 DIV 區塊，由第一個 DIV 區塊可以看到 background-image 預設的背景圖片，若背景圖片尺寸小於 DIV 區塊時，圖片則會自動重複到填滿整個區域。而第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態只能沿著垂直方向重複。相關設定請參閱3. 背景重複設定 (background-repeat)。
 其他常用 CSS background 背景屬性說明連結1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position) |
延伸閱讀：
前端工程師必學CSS背景五個常識(二)-如何讓背景固定住?
前端工程師必學CSS背景五個常識(三)-如何設定背景位置?
前端工程師必學CSS背景五個常識(四)-如何設定背景顏色?
邀你認識「KISS 原則」神奇的網路行銷課程
擠進高薪科技大門-Java課程等你來瞭解!
Python課程的人工智慧醫療系統讓你全面提升醫療品質!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
