【自學程式】如何設定網頁的背景圖片？多層次背景圖、漸層背景教學

在開始閱讀前，建議可以到免費圖庫中，找一張圖片一起跟著內文學習、練習調整。在這個圖庫中的圖片，都可以透過「滑鼠右鍵>複製圖片位置」，取得該圖片的圖片位置，非常適合用來做練習。

background系列語法

• background-image
• background-clip
• background-color
• background-origin
• background-position
• background-repeat
• background-size
• background-attachment

background-image 語法教學：

• url(" ")：

1. 在url值中，可以帶入圖片的路徑位置，可以是本地端的圖片路徑，也可以是圖床上、雲端空間中的圖片路徑。
2. 一個background-iamge屬性中可以帶入多個url(" ")的值，支援在同一個容器中多圖層的背景效果，越前方的值圖層越前面，如果想要打造多層次的背景就必須知道，此屬性的參數是有「順序的」。
3. 圖片的路徑必須為「字串」。

可以參考MDN文件中，所列出的範例協助理解此觀念。

• linear-gradient( )：

1. 此屬性可帶入三個值，分別為漸層的方向、起始顏色、結束顏色
2. 漸層的方向可以分為「方向性」及「角度兩種」
3. 漸層方向參數包含：to left、to right、to bottom 、to top幾種，代表的方向分別為由右至左、由左至右、由上至下、由下至上。
4. 漸層的角度可以透過「數字+deg」的方式來自定義你的漸層要往哪個角度延伸，舉例來說：45deg的數值會讓漸層的方向呈現45度角。
5. 第二個及第三個值可以是rgba的呈現方式，或是以hex（色碼）來做帶入呈現，但通常會以rgba的方式呈現，因為可以帶入透明度，讓網頁產生多層次的效果。

為網頁設置背景圖片

Tips：網頁的高度通常會由「內容高度」撐出來，但如果該容器本身內容不夠多，導致沒辦法將容器撐出高有的高度，這時候就要自定義網頁的高度。

為網頁創造漸層效果：

千萬要記得，linear-gradient的語法一定要在url("")語法前，不然就會導致圖層的順序不對，導致效果出不來。