在網頁開發的學習生活中,我最頭痛的並不是 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下定決心開啟轉職工程師的新生活,相信不斷學習會有成長的一天。