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

在初學網頁排版的時候，文字、段落、列表的排版可以說是比較好上手的，只要稍微透過margin、padding、border及文字顏色上調整，就可以輕易獲得一段美美的文字。

然而要去調整圖片的大小及其他相關效果，就不是那麼容易的一件事了，往往在開發時，都會出現圖片效果不如自己預期的狀況。

今天就讓我們從網頁的背景圖開始介紹起吧！

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

background系列語法

在開始設定網頁圖片前，我們首先要建立對於背景圖片設置的基礎認識，CSS語法有提供一系列以background開頭的語法，專門用來調整網頁背景，可以分為以下幾種類型：

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

基本上，網頁的背景圖片效果都可以透過以上語法，及其各自提供的屬性實作出來，如果上面列出的屬性有你不曉得、第一次看過的，我非常建議你持續收看這系列的文章。

而這一個章節，我們要細細介紹background-image這個語法，並讓大家能簡易的創造出不同效果的網頁背景圖片：

background-image 語法教學：

透過background-image語法，我們可以為網頁加入背景，下方為語法範例：

background-iamge提供了兩種屬性值可做使用：

• 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的方式呈現，因為可以帶入透明度，讓網頁產生多層次的效果。

為網頁設置背景圖片

學了有關backgound-image的相關語法後，我們接下來就要練習如何創造出圖片中的網頁背景效果了。

範例一：透過background-image創造出簡單的背景圖片+語錄效果

範例程式碼：

步驟一：在HTML簡單建立出網頁的結構div.banner>div.quote>p>lorem5

步驟二：在.banner上使用background-image的語法，插入背景圖片

步驟三：插入背景圖片後，需要調整div.banner這個容器的大小，如果沒有設定網頁容器的大小，背景圖片就會無法呈現，在這裡我們設置為把寬度設為滿版，並給予600px的高度。

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

步驟四：調整div.quote的視覺效果，利用border-left創建出quote的左側襯線。

步驟五：在父容器上使用padding-top，將內容推擠到自己想要的地方，並在子容器上使用margin: 0 auto;將自己置中在父容器中間

這樣就完成了我們常見的網頁背景圖設定啦！

如果會了這樣的網頁結構，就可以變換出額外的不同效果，接下來我們就來看看，要怎麼幫背景圖片上「漸層濾鏡」？

為網頁創造漸層效果：

在前面的語法教學中我們有提到，background-image這個屬性內所帶入的值的「順序」，會影響到網頁背景的「圖層順序」，透過這樣的特性，我們可以利用這個特性，為網頁創造出「濾鏡效果」。

讓我們來看看先前的例子，在還沒有套上漸層效果前：

現在我覺得天空的色調太灰，下方太粉，想要套上不一樣的漸層效果來矯正一下背景的顏色：

讓兩者的效果透過background-image的語法重疊在一起，就可以得到下方的效果：

這樣的效果要怎麼做到呢？

讓我們接續著第一個範例，來繼續說明：

在這個範例中，我們只是在原本的url("")語法前面，加入了linear-gradient的語法，就可以輕鬆打造出濾鏡效果。

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

是不是很簡單呢？

今天簡單教了大家要如何透過background-image的語法，來設定背景及漸層效果，是不是很簡單呢？

如果今天的教學，對你來說有點難度的話，很有可能是因為你對於CSS的屬性，或是網頁的架構還沒有那麼熟悉，我會建議你看看：

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於我：

2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com