前端工程師的小基礎:背景重複顯示設定

前端工程師的入門就覺得很難嗎?一點也不會,讓我們看下去!!

CSS background-repeat 用來設定背景圖片是否重覆顯示、重覆顯示的方向，通常與 背景圖樣設定 (background-image) 搭配使用。若背景圖片是相對小的圖片，前端工程師則可以使用 background-repeat 將小圖片自動佈滿全部網頁背景，是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些，以免視覺不整齊)；當背景圖片是一張具有顯示範圍較大的圖片，則可以用 background-repeat 的「no-repeat」指令將圖片限制只顯示一次。

CSS background-repeat 基本語法如下：

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) 推薦閱讀: 簡易HTML5教學讓沒有相關背景的人,也都成為程式工程師 文字在HTML5教學裡的奧秘都在這了! 增強網頁 SEO效果的HTML5教學 中國IT教育領導品牌　達內教育集團第一家海外授權中心 NOWnews 今日新聞 達內課程先就業再付款- 中時電子報 Java課程助你擠進IT專業職場大門