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)