前端工程師用CSS背景重複顯示設定就搞定!小撇步報你知
CSS background-repeat 是用來設定背景圖片是否重覆顯示、重覆顯示的方向，通常和 背景圖樣設定 (background-image) 搭配使用。如果背景圖片是比較小的圖片，
前端工程師 可以使用 background-repeat 把小圖片自動佈滿整個網頁背景，是非常普遍的節省頻寬設計方式 (但圖片圖樣得要單純一些，以免視覺雜亂)；當背景圖片是一張具有顯示範圍較大的圖片，就可以用 background-repeat 的「no-repeat」指令將圖片限制只顯示一次。
其實除了上例的四個參數，還有一個 inherit 屬性，是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援，可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用，因此在此省略不介紹。
相關閱讀:
複製貼上快速搞定!給前端工程師的十六進位代碼常用顏色表!
想成為前端工程師必備知識:Class選擇器宣告法
前端工程師如何將CSS樣式表套用至HTML?
Python人工智慧出台灣奇蹟
上HTML5教學的必經之路1:先掌握初學者的敲門磚!
上Python課程的你,明年必看春節強檔-艾莉塔 戰鬥天使
Python課程新產物----AI門診你聽過嗎? 最新科技確診只要2秒!!
CSS background-repeat 基本語法如下：
background-repeat: 重複參數;
有四種
前端工程師 可以使用的重複參數來決定重複方向或是是否重複，分別為 repeat（預設值，圖片會沿著 x 軸與 y 軸重複）、repeat-x（圖片會沿著x軸重複）、repeat-y（圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例：CSS background-repeat 各種參數的範例
其實除了上例的四個參數，還有一個 inherit 屬性，是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援，可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用，因此在此省略不介紹。
| 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position) |
相關閱讀:
複製貼上快速搞定!給前端工程師的十六進位代碼常用顏色表!
想成為前端工程師必備知識:Class選擇器宣告法
前端工程師如何將CSS樣式表套用至HTML?
Python人工智慧出台灣奇蹟
上HTML5教學的必經之路1:先掌握初學者的敲門磚!
上Python課程的你,明年必看春節強檔-艾莉塔 戰鬥天使
Python課程新產物----AI門診你聽過嗎? 最新科技確診只要2秒!!
