【自學程式】如何調整網頁背景圖片大小？解決背景重複、圖塞不滿問題
更新於 2022/11/10閱讀時間約 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
｜聯絡我：vivian.enlife@gmail.com
430會員
100內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助