CSS background-repeat 背景圖片是否重覆顯示

CSS background-repeat 背景圖片是否重覆顯示功能可以輕易的設定背景圖片的呈現方式，例如一張小圖重複顯示佈滿整個網頁背景或者是僅單純的顯示一次即可，在設計網頁背景圖片或 DIV 區塊背景圖片的時候非常好用。background-repeat 屬性是 CSS 的標準功能，所有的主流瀏覽器都支援這個屬性，正常情況下 background-repeat 會與 background-image 一起使用。

CSS background-repeat 屬性的基本語法
background-repeat: 背景圖片重複的方向或是否要重複顯示;
background-repeat 有四種常用參數，可以讓背景圖片重複佈滿整個區域（或網頁背景），或者是單純的往 X 軸（水平）方向或 Y 軸（垂直）方向重複，也可以讓背景圖片不要重複顯示，這四種參數必須這樣寫。

參數說明
  • background-repeat:repeat; //這是預設值，背景圖片會在水平與垂直方向重複。
  • background-repeat:repeat-x; //只在 X 軸（水平）方向重複顯示
  • background-repeat:repeat-y; //只在 Y 軸（垂直）方向重複顯示
  • background-repeat:no-repeat; //不重複顯示
搞懂這四種參數的差異，我們就可以套用到實際的網頁元素中囉！請接著看範例

CSS background-repeat 屬性範例一、沿著 X 軸方向重複顯示背景圖片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS background-repeat</title>
</head>
<body style="background-image:url(背景圖片網址);background-repeat:repeat-x;">
網頁內容
</body>
</html>
範例一是個簡單的 HTML 網頁架構，我們在 <body> 標籤內使用了「style="background-image:url(背景圖片網址);background-repeat:repeat-x;"」這段語法，表示要在網頁顯示一個背景圖片，而且要沿著 x 軸方向重複顯示。如果少了 background-image 屬性，則 background-repeat 就沒有意義，關於背景圖片的語法請參閱：
如果想讓背景圖片在垂直的 Y 軸方向重複顯示該怎麼做呢？請看範例二。

CSS background-repeat 屬性範例二、沿著 Y 軸方向重複顯示背景圖片
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS background-repeat</title>
</head>
<body style="background-image:url(背景圖片網址);background-repeat:repeat-y;">
網頁內容
</body>
</html>
範例二與範例一唯一的差別僅在於 background-repeat 參數使用 repeat-y，其它的內容都完全一樣，各位讀者可以把範例一或範例二的程式碼複製起來，貼到一個空白文件，並存為 test.html 檔案，然後用瀏覽器開啟就可以看到效果了，不過背景圖片可能要自己準備，這個部份應該不是什麼難事，小畫家隨便畫一張圖就可以啦！

更多 CSS background 系列
© Copyright webtech.tw Since 2010