background-repeat · 跟老司機學CSS3

**background-repeat** * 描述：設置對象的背景圖像如何鋪排填充 * 版本：CSS1 | CSS3 該屬性在 CSS3 有修改 * 繼承性：無 **語法** ``` background-repeat:鋪排值; ``` 鋪排值可能 * repeat：默認。將背景圖在垂直方向和水平方向重復。 * repeat-x：將背景圖在水平方向重復。 * repeat-y：將背景圖在垂直方向重復。 * no-repeat：背景圖像將僅顯示一次。 * inherit：從父元素繼承 background-repeat 屬性的設置。 * round：背景圖像自動縮放直到適應且填充滿整個容器。（CSS3） * space：背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3） **使用說明** 背景圖的位置根據 background-position 屬性設置的。未規定 background-position 屬性，圖像會被放置在元素的左上角。可以提供兩個參數，第一個用于橫向，第二個用于縱向。若只提供一個參數，則同時作用于橫向和縱向。特殊值 repeat-x 和 repeat-y 除外。 repeat-x 相當于 repeat no-repeat。 repeat-y 相當于 no-repeat repeat。 **代碼示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-repeat</title> <style> #container{ width: 400px; height: 400px; border: 1px solid #ff6600; background-image: url(../img/01.jpg); background-repeat: repeat no-repeat; /*等價于 repeat-x*/ } </style> </head> <body> <div id="container"> </div> </body> </html> ``` ![background-repeat](https://box.kancloud.cn/7fae573c61e8e8061c2ecbc29bed4e31_422x269.png)