前端工程師CSS基礎功之背景重複顯示設定

前端工程師CSS基礎功之背景重複顯示設定

前端工程師利用CSS搭配網頁設計是必備技能,本篇要教你如何設定背景重複顯示的方法.

前端工程師 經常利用 CSS background-repeat 來設定背景圖片是否重覆顯示、重覆顯示的方向,並且常與 背景圖樣設定 (background-image) 搭配使用。但是如果背景圖片是比較小的圖片,則可以使用 background-repeat 將小圖片自動佈滿整個網頁背景,這是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些,以免視覺雜亂);當背景圖片是一張具有顯示範圍較大的圖片,則可以用 background-repeat 的「no-repeat」指令將圖片限制只顯示一次。

CSS background-repeat 基本語法如下:

background-repeat: 重複參數;
前端工程師 有四種 CSS background-repeat可以使用的重複參數來決定重複方向或是是否重複,分別為 repeat(預設值,圖片會沿著 x 軸與 y 軸重複)、repeat-x(圖片會沿著x軸重複)、repeat-y(圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例:

CSS background-repeat 各種參數的範例

See the Pen background-repeat-example by Tedutw (@Tedutw) on CodePen.

其實除了上例的四個參數,還有一個 inherit 屬性,是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援,可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用,因此在此省略不介紹。


其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)


參考連結:
前端工程師CSS基礎功之背景位置設定

前端工程師CSS基礎功之背景固定模式設定

前端工程師CSS基礎功之背景顏色設定

有了網頁顏色代碼整理,網頁設計對於前端工程師來說再也不難!

達內教育又要和兩大IT產業合作了!快來看看這次他們的計畫~

達內教育學員見證

達內教育海外合作企業

全球首屆元宇宙時裝周,複刻20年前的失敗?

全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座?新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」(Metaverse Fashion Week...