【自學程式】如何調整網頁背景圖片大小?解決背景重複 | css背景填滿
在網頁開發的學習生活中,我最頭痛的並不是Flexbox或是其他有關文字相關的排版,而是「圖片」的效果設定。在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。於是近期我打算寫一系列的「網頁圖片教學」,前一篇文章我們學習了該如何使用background-image來創造簡單的背景效果,這個章節我們要進階一點,學習如果優化我們的「背景圖片」。在開始閱讀前,建議可以到免費圖庫[1]中,找一張圖片一起跟著內文學習、練習調整。在這個圖庫中的圖片,都可以透過「...
在網頁開發的學習生活中,我最頭痛的並不是 Flexbox 或是其他有關文字相關的排版,而是「圖片」的效果設定。
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
於是近期我打算寫一系列的「網頁圖片教學」,前一篇文章我們學習了該如何使用background-image來創造簡單的背景效果,這個章節我們要進階一點,學習如果優化我們的「背景圖片」。
在開始閱讀前,建議可以到免費圖庫[1]中,找一張圖片一起跟著內文學習、練習調整。在這個圖庫中的圖片,都可以透過「滑鼠右鍵>複製圖片位置」,取得該圖片的圖片位置,非常適合用來做練習。 ➤ background系列語法 今天的教學,會大量使用background-image的語法,如果你並不是很熟悉,建議可以閱讀這一篇文章[2]。很多人學了網頁開發很久,卻依然會搞不清楚網頁的背景圖片該怎麼設定,在實務開發上往往要花非常多時間除錯,找了很久補了一個洞,下一次依然在不同的專案遇到一樣的問題。
對於網頁背景圖片設定,除了會跟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>創造出來的...