Java瑪奇朵-非本科系的IT吃喝電玩日誌

前端工程師專欄今天一次給妳四種不同的CSS背景重複顯示設定方法!! 快點筆記下來吧!!

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套入HTML中的四種方法~

前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼

前端工程師和後端工程師的差異,想學網頁的你也一定要知道!

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

人工智慧寫作能力勝過人類,文章新聞真假難辨!

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？