嫩嫩的程式學習紀錄 - Jim

本篇的前端工程師網頁初級課程,主要教大家如何利用CSS來使背景圖片重複顯示哦!

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

CSS background-repeat 基本語法如下：

background-repeat: 重複參數;

前端工程師表示在CSS中，有四種可以使用的重複參數來決定重複方向或是是否重複，分別為 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標籤也玩父與子?就讓前端工程師來解密!

CSS跟HTML怎樣才能迸出愛的火花?前端工程師笑說其實很簡單!

前端工程師CSS大補帖上集-Div篇

達內課程先就業再付款- 中時電子報

想用語音辨識但怕自己有台灣國語?別擔心!這人工智慧聽得懂!

SEO優化隱惡揚善好幫手:robots meta

2019最佳職缺-AI人工智慧.物聯網.大數據.VR/AR,前景無限美好!