CSS background-repeat 屬性
更多“自己嘗試”的例子見下文。
定義和用法
background-repeat 屬性用於設定背景圖片是否重複以及如何重複。
預設情況下，背景圖片會同時在垂直和水平方向上重複。
提示：背景圖片的位置由 background-position 屬性決定。如果未指定 background-position，則圖片始終放置在元素的左上角。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| 重複 | 背景圖片同時在垂直和水平方向上重複。如果最後一個圖片不適合，它將被裁剪。這是預設值。 | 演示 ❯ |
| repeat-x | 背景圖片僅在水平方向上重複 | 演示 ❯ |
| repeat-y | 背景圖片僅在垂直方向上重複 | 演示 ❯ |
| no-repeat | 不重複背景圖片。圖片將只顯示一次 | 演示 ❯ |
| space | 背景圖片會盡可能多地重複，而不會被裁剪。第一個和最後一個圖片分別固定在元素的兩側，並且它們之間的空白會均勻分佈。 | 演示 ❯ |
| round | 背景圖片會重複並拉伸或壓縮以填滿空間（無間隙） | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
同時在垂直和水平方向上重複背景圖片（這是預設值）
body {
background-image: url("paper.gif");
background-repeat: repeat;
}
自己動手試一試 »
示例
僅在水平方向上重複背景圖片
body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}
自己動手試一試 »
示例
不重複背景圖片。圖片將只顯示一次
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
自己動手試一試 »
示例
使用 background-repeat: space 和 background-repeat: round
#example2 {
border: 2px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: round;
}
自己動手試一試 »
示例
使用不同的背景屬性建立“英雄”圖片
.hero-image {
background-image: url("photographer.jpg"); /* 使用的圖片 */
background-color: #cccccc; /* 如果圖片不可用時使用 */
height: 500px; /* 您必須指定高度 */
background-position: center; /* 居中圖片 */
background-repeat: no-repeat; /* 不重複圖片 */
background-size: cover; /* 將背景圖片縮放到覆蓋整個容器 */
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 背景
CSS 參考： background-position 屬性
HTML DOM 參考：backgroundRepeat 屬性
