【自學程式】如何調整網頁背景圖片大小？解決背景重複、圖塞不滿問題
2021/07/31閱讀時間約 8 分鐘
在網頁開發的學習生活中，我最頭痛的並不是 Flexbox 或是其他有關文字相關的排版，而是「圖片」的效果設定。
在一個網頁上，會需要使用到圖片的地方有非常多處，像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
於是近期我打算寫一系列的「網頁圖片教學」，前一篇文章我們學習了該如何使用background-image來創造簡單的背景效果，這個章節我們要進階一點，學習如果優化我們的「背景圖片」。
在開始閱讀前，建議可以到免費圖庫中，找一張圖片一起跟著內文學習、練習調整。在這個圖庫中的圖片，都可以透過「滑鼠右鍵>複製圖片位置」，取得該圖片的圖片位置，非常適合用來做練習。
➤ background系列語法
今天的教學，會大量使用background-image的語法，如果你並不是很熟悉，建議可以閱讀這一篇文章。
很多人學了網頁開發很久，卻依然會搞不清楚網頁的背景圖片該怎麼設定，在實務開發上往往要花非常多時間除錯，找了很久補了一個洞，下一次依然在不同的專案遇到一樣的問題。
對於網頁背景圖片設定，除了會跟background系列的語法會有相關外，通常還會伴隨著：
- 自身對於網頁容器的了解
- 語法的熟練度
- 是否有應用在專案上、實作過
我們今天將會著重介紹以下三個語法，來修正我們在網頁圖片設置上常出現的問題：
- background-size
- background-pisition
- background-repeat
除了以上提的這幾個語法，還有其他background相關的CSS語法也很常在實務上使用到：
- background-clip
- background-color
- background-origin
- background-attachment
接下來就讓我們一一釐清那些背景圖片跑位、圖片重複、背景圖片塞不滿的問題。
➤ 使用background-size自定義背景圖片大小
在 CSS background系列語法中，有一個語法與調整圖片的 object-fit 語法很類似，專門用來調整背景圖片的大小，這個語法是：background-size。
Tips : 這裡指的圖片意指使用<img>創造出來的圖片元素，而背景圖片則是需要使用background系列語法，並搭配對應容器所定義出來的背景圖片。
background-size 屬性可以填入四種值，分別為 auto 、 contain 、cover及自定義尺寸。
- auto的值為預設值，如果沒有額外設定背景圖片的大小，背景圖片就會依照容器大小顯示，往往會出現圖片太大、沒辦法調整到自己想要的畫面。
- contain值會讓背景圖片的寬高等比例縮小至能塞進容器，在預設的狀況下，background-size:contain 語法會帶有backgound-repeat的設定，會讓背景不斷重複。
- cover值可以讓背景圖片在不改變比例的狀況下，讓圖片放大至填滿容器。
- 可以透過 px 、%等單位控制背景圖片的大小，要注意的是，如果圖片本身的大小沒辦法將容器填滿，就會帶有backgound-repeat的設定，會讓背景不斷重複。
接下來我們來看看程式碼範例：
從範例中可以清楚看到，通常我們要設定網頁圖片的大小，要簡單又快速的方式就是使用background-size:cover了。
瀏覽器有一個聰明的設定，就是當背景圖片太小時他就會自動用同樣的背景圖片填滿它，所以background-size:contain的設定很常會使用在「圖樣單純」、「需重複堆疊」的背景圖樣上，這樣可以避免網頁載入重複的圖片，提升網頁的效能。
但如果我們依然想要讓圖片完整的呈現在容器裡，並且不想要它重複怎麼辦？
➤ 使用background-repeat自定義背景是否重複
background-repeat語法可以取消因為要填滿容器，而帶有的預設重複樣式。
預設的重複語法為background-repeat:repeat，如果想要取消重複的話，則需要使用background-repeat: no-repeat來取消預設的樣式。
接下來我們來看看這個範例：
延續 background-size的範例討論，我們現在想要獲得兩種不同的效果：
- 背景圖片不改變比例的完整出現，並且重複出現
- 背景圖片不改變比例、不被裁切的出現在容器裡
我們可以這樣做：
在同樣擁有background-size:contain;的狀況下，在第二個區塊中使用了background-repeat: no-repeat的語法來取消重複的效果。
透過此語法，我們就可以讓圖片完整的呈現在容器裡，但又不會有重複的效果囉！
➤ 使用background-position替背景調整位置
在使用前面兩種語法設定時，我們只能決定兩件事：
- 背景圖片的大小
- 背景圖片是否要重複
但往往我們在套用背景圖片時，可能沒辦法只靠這兩個語法就得到我們想要的背景。
而background-position語法正好可以解決這個問題，在這個語法中，我們可以填入三種類型的值：
- 方向關鍵字
- 以px為單位的位置
- 以%為單位的位置
這樣說明可能會有些簡略，讓我們來看看更進階的語法介紹。
➤ background-position的方向關鍵字
在background-position中，我們可以使用「方向關鍵字」來幫背景圖片定位，方向關鍵字有五種類型：
- background-position: top;
- background-position: bottom;
- background-position: left;
- background-position: right;
- background-position: center;
top、bottom、left、right關鍵字，分別能讓背景圖片往上、下、左、右移動，而center關鍵字則可以讓背景圖片置中。
透過方向關鍵字，我們可以讓背景圖片露出想要露出的部分，我們來看看這個範例：
我們可以從範例中看到置左、置中效果的差異，除了使用方向關鍵字來調整位置外，我們可以透過px、%為單位的方式來調整網頁背景的位置。
讓我們來看看這個語法：
background-position: 25% 75%;
這段語法的意思為，把背景圖片置於由左至右25%、由上至下75%的位置，也就是在background-position語法帶入兩個由數值組成參數時，意指 x 軸 y 軸的位移程度。
我們還可以在background-position中帶入四個參數值，在四個參數值的狀況下，我們可以搭配方向關鍵字一同使用：
background-position: right 25% bottom 75%;
此段語法因為加上了方向關鍵字，就不見得都是指 x 軸與 y 軸上的位移了，但一但前面參數中帶入了 left 或是 right 就代表是 x 軸的位移，只是 left 是從左側起算， right 是從右邊起算；反之亦然。
這個章節我們學習了三種語法，而這三種語法是在網頁開發上，非常頻繁使用、用來調整背景圖片設置的CSS語法，非常建議多花一點時間研究並熟悉。
如果你想要更熟悉背景圖片的設置，你還可以參考這一篇文章。
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：[email protected]
381會員
91內容數
留言0
查看全部
