【自學程式】如何調整網頁背景圖片大小?解決背景重複、圖塞不滿問題

閱讀時間約 8 分鐘
在網頁開發的學習生活中,我最頭痛的並不是 Flexbox 或是其他有關文字相關的排版,而是「圖片」的效果設定。
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
於是近期我打算寫一系列的「網頁圖片教學」,前一篇文章我們學習了該如何使用background-image來創造簡單的背景效果,這個章節我們要進階一點,學習如果優化我們的「背景圖片」。
在開始閱讀前,建議可以到免費圖庫中,找一張圖片一起跟著內文學習、練習調整。在這個圖庫中的圖片,都可以透過「滑鼠右鍵>複製圖片位置」,取得該圖片的圖片位置,非常適合用來做練習。

➤ background系列語法

今天的教學,會大量使用background-image的語法,如果你並不是很熟悉,建議可以閱讀這一篇文章
很多人學了網頁開發很久,卻依然會搞不清楚網頁的背景圖片該怎麼設定,在實務開發上往往要花非常多時間除錯,找了很久補了一個洞,下一次依然在不同的專案遇到一樣的問題。
對於網頁背景圖片設定,除了會跟background系列的語法會有相關外,通常還會伴隨著:
  1. 自身對於網頁容器的了解
  2. 語法的熟練度
  3. 是否有應用在專案上、實作過
我們今天將會著重介紹以下三個語法,來修正我們在網頁圖片設置上常出現的問題:
  • 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及自定義尺寸。
  1. auto的值為預設值,如果沒有額外設定背景圖片的大小,背景圖片就會依照容器大小顯示,往往會出現圖片太大、沒辦法調整到自己想要的畫面。
  2. contain值會讓背景圖片的寬高等比例縮小至能塞進容器,在預設的狀況下,background-size:contain 語法會帶有backgound-repeat的設定,會讓背景不斷重複。
  3. cover值可以讓背景圖片在不改變比例的狀況下,讓圖片放大至填滿容器。
  4. 可以透過 px 、%等單位控制背景圖片的大小,要注意的是,如果圖片本身的大小沒辦法將容器填滿,就會帶有backgound-repeat的設定,會讓背景不斷重複。
接下來我們來看看程式碼範例:
從範例中可以清楚看到,通常我們要設定網頁圖片的大小,要簡單又快速的方式就是使用background-size:cover了。
瀏覽器有一個聰明的設定,就是當背景圖片太小時他就會自動用同樣的背景圖片填滿它,所以background-size:contain的設定很常會使用在「圖樣單純」、「需重複堆疊」的背景圖樣上,這樣可以避免網頁載入重複的圖片,提升網頁的效能。
但如果我們依然想要讓圖片完整的呈現在容器裡,並且不想要它重複怎麼辦?

➤ 使用background-repeat自定義背景是否重複

background-repeat語法可以取消因為要填滿容器,而帶有的預設重複樣式。
預設的重複語法為background-repeat:repeat,如果想要取消重複的話,則需要使用background-repeat: no-repeat來取消預設的樣式。
接下來我們來看看這個範例:
延續 background-size的範例討論,我們現在想要獲得兩種不同的效果:
  1. 背景圖片不改變比例的完整出現,並且重複出現
  2. 背景圖片不改變比例、不被裁切的出現在容器裡
我們可以這樣做:
在同樣擁有background-size:contain;的狀況下,在第二個區塊中使用了background-repeat: no-repeat的語法來取消重複的效果。
透過此語法,我們就可以讓圖片完整的呈現在容器裡,但又不會有重複的效果囉!

➤ 使用background-position替背景調整位置

在使用前面兩種語法設定時,我們只能決定兩件事:
  1. 背景圖片的大小
  2. 背景圖片是否要重複
但往往我們在套用背景圖片時,可能沒辦法只靠這兩個語法就得到我們想要的背景。
而background-position語法正好可以解決這個問題,在這個語法中,我們可以填入三種類型的值:
  1. 方向關鍵字
  2. 以px為單位的位置
  3. 以%為單位的位置
這樣說明可能會有些簡略,讓我們來看看更進階的語法介紹。

➤ 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]
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
發表第一個留言支持創作者!
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎,是台南地區一所特別的實驗學校。小學部分經營已經有七年,從一開始僅有八位學生到如今成長至七十多名學生,這樣的發展過程中,需要家長們慢慢了解並認同蒙特梭利的教育理念。 在這幾年的疫情風波中,學校經歷了許多挑戰,但已逐漸趨於穩定。上華蒙特梭利小
整理幾個自學網站,或許未來用得上。
Thumbnail
第二題練習題~應用的內容跟判斷質數差不多,甚至再更少一點(因為沒有要用到迴圈),所以這次寫起來就快很多,除了題目難度比較低之外,經過上次的洗禮之後,對於解題應該有再抓到更多感覺,所以寫這題比較有成就感一點XD 主題:宣告變數和判斷式的的綜合小應用 題目:每個人都有心目中夢想的身高,像小鳴就夢想著
Thumbnail
從跟著教學影片把老師的程式抄過一遍,變成看到題目能把題目轉為程式,對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程,以及我解題的方法是什麼。(也順便紀錄一下自己的思路) ※主題:流程控制為主的綜合小應用 ※題目:讓使用者輸入一個數字,並用程式判斷該數字是否為質數
Thumbnail
網路上提到自學程式的文章,都會說自學程式非常地辛苦,而且要很自律,決心夠強;而當自己踏上這條路後,才發現何止是辛苦,根本是佈滿荊棘,常常寸步難行,且被刺地遍體鱗傷(喂~是不是有點太浮誇了),但在每個寫出程式豁然開朗的當下,卻又成就感滿滿,所以想藉著寫部落格紀錄一下自己的學習過程!
Thumbnail
程式語言只是工具,更重要的是程式邏輯 【運算思維】 1.拆解: 將一個任務或問題拆解成數個步驟或部分。 2.找出規律: 預測問題的規律,並找出模式做測試。 3.歸納與抽象化: 找出最主要導致此模式的原則或因素。 4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
Thumbnail
最近很多人私訊我他們自學遇到的瓶頸,有些人會覺得學不會程式,是自己太笨沒天分,或從小數理能力就差,才學不起來。但以我自己這些年自學程式並創業的經驗,我認為可能原因是自己操之過急了,因為想要快速達到像是轉職或是創業等等目標,所以覺得得學得越快越好。但這個領域需要的是長時間的磨練,慢慢一點點累積
Thumbnail
設定好你的目標,做好目標分解,接下來就是學習與實作,在過程中,肯定會遇到各種問題需要debug,這應該是剛入門自學程式的人最痛苦的部分,可能看到bug不知道google要下甚麼關鍵字,也可能搜出一堆文章看得頭昏腦脹,所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程,是怎麼面對這種狀況的
Thumbnail
之前跟大家分享【表現目標】和【學習目標】,有助於設定自學的終點,但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】,這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法,希望對剛入門自學程式的朋友有幫助
Thumbnail
除了增進程式技術和技巧以外,我覺得建立起正確的【自學心態】更重要,保持正確的態度能讓你持續不斷的精進學習,不會半途而廢,也更能享受進步帶來的成就感,我從自己過去零基礎開始自學程式然後做出線上服務的經驗,整理出一些入門自學的朋友應該抱持的心態,相信會很有幫助
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎,是台南地區一所特別的實驗學校。小學部分經營已經有七年,從一開始僅有八位學生到如今成長至七十多名學生,這樣的發展過程中,需要家長們慢慢了解並認同蒙特梭利的教育理念。 在這幾年的疫情風波中,學校經歷了許多挑戰,但已逐漸趨於穩定。上華蒙特梭利小
整理幾個自學網站,或許未來用得上。
Thumbnail
第二題練習題~應用的內容跟判斷質數差不多,甚至再更少一點(因為沒有要用到迴圈),所以這次寫起來就快很多,除了題目難度比較低之外,經過上次的洗禮之後,對於解題應該有再抓到更多感覺,所以寫這題比較有成就感一點XD 主題:宣告變數和判斷式的的綜合小應用 題目:每個人都有心目中夢想的身高,像小鳴就夢想著
Thumbnail
從跟著教學影片把老師的程式抄過一遍,變成看到題目能把題目轉為程式,對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程,以及我解題的方法是什麼。(也順便紀錄一下自己的思路) ※主題:流程控制為主的綜合小應用 ※題目:讓使用者輸入一個數字,並用程式判斷該數字是否為質數
Thumbnail
網路上提到自學程式的文章,都會說自學程式非常地辛苦,而且要很自律,決心夠強;而當自己踏上這條路後,才發現何止是辛苦,根本是佈滿荊棘,常常寸步難行,且被刺地遍體鱗傷(喂~是不是有點太浮誇了),但在每個寫出程式豁然開朗的當下,卻又成就感滿滿,所以想藉著寫部落格紀錄一下自己的學習過程!
Thumbnail
程式語言只是工具,更重要的是程式邏輯 【運算思維】 1.拆解: 將一個任務或問題拆解成數個步驟或部分。 2.找出規律: 預測問題的規律,並找出模式做測試。 3.歸納與抽象化: 找出最主要導致此模式的原則或因素。 4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
Thumbnail
最近很多人私訊我他們自學遇到的瓶頸,有些人會覺得學不會程式,是自己太笨沒天分,或從小數理能力就差,才學不起來。但以我自己這些年自學程式並創業的經驗,我認為可能原因是自己操之過急了,因為想要快速達到像是轉職或是創業等等目標,所以覺得得學得越快越好。但這個領域需要的是長時間的磨練,慢慢一點點累積
Thumbnail
設定好你的目標,做好目標分解,接下來就是學習與實作,在過程中,肯定會遇到各種問題需要debug,這應該是剛入門自學程式的人最痛苦的部分,可能看到bug不知道google要下甚麼關鍵字,也可能搜出一堆文章看得頭昏腦脹,所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程,是怎麼面對這種狀況的
Thumbnail
之前跟大家分享【表現目標】和【學習目標】,有助於設定自學的終點,但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】,這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法,希望對剛入門自學程式的朋友有幫助
Thumbnail
除了增進程式技術和技巧以外,我覺得建立起正確的【自學心態】更重要,保持正確的態度能讓你持續不斷的精進學習,不會半途而廢,也更能享受進步帶來的成就感,我從自己過去零基礎開始自學程式然後做出線上服務的經驗,整理出一些入門自學的朋友應該抱持的心態,相信會很有幫助