ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# CSS background-repeat 属性 ## 实例 ``` body { background-image: url(stars.gif); background-repeat: repeat-y; } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有浏览器都支持 background-repeat 属性。 注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 ## 定义和用法 background-repeat 属性设置是否及如何重复背景图像。 默认地,背景图像在水平和垂直方向上重复。 ### 详细说明 background-repeat 属性定义了图像的平铺模式。 从原图像开始重复,原图像由 [background-image](/cssref/pr_background-image.asp "CSS background-image 属性") 定义,并根据 [background-position](/cssref/pr_background-position.asp "CSS background-position 属性") 的值放置。 | 默认值: | repeat | | --- | --- | | 继承性: | no | | --- | --- | | 版本: | CSS1 | | --- | --- | | JavaScript 语法: | _object_.style.backgroundRepeat="repeat-y" | | --- | --- | ## 提示和注释 提示:背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。 ## 可能的值 | 值 | 描述 | | --- | --- | | repeat | 默认。背景图像将在垂直方向和水平方向重复。 | | repeat-x | 背景图像将在水平方向重复。 | | repeat-y | 背景图像将在垂直方向重复。 | | no-repeat | 背景图像将仅显示一次。 | | inherit | 规定应该从父元素继承 background-repeat 属性的设置。 | ## TIY 实例 [如何重复背景图像](/tiy/t.asp?f=csse_background-repeat) 本例演示如何重复背景图像。 ``` <html> <head> <style type="text/css"> body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat } </style> </head> <body> </body> </html> ``` [如何在垂直方向重复背景图像](/tiy/t.asp?f=csse_background-repeaty) 本例演示如何垂直地重复背景图像。 ``` <html> <head> <style type="text/css"> body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y } </style> </head> <body> </body> </html> ``` [如何在水平方向重复背景图像](/tiy/t.asp?f=csse_background-repeatx) 本例演示如何水平地重复背景图像。 ``` <html> <head> <style type="text/css"> body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-x } </style> </head> <body> </body> </html> ``` [如何仅显示一次背景图像](/tiy/t.asp?f=csse_background-repeat_no-repeat) 本例演示如何仅显示一次背景图像。 ``` <html> <head> <style type="text/css"> body { background-image: url('/i/eg_bg_03.gif'); background-repeat: no-repeat } </style> </head> <body> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 背景](/css/css_background.asp "CSS 背景") HTML DOM 参考手册:[backgroundRepeat 属性](/jsref/prop_style_backgroundrepeat.asp "HTML DOM backgroundRepeat 属性")