手册
目录
默认情况下，background-image 属性在水平和垂直方向上都重复图像。
某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：
body {
background-image: url("gradient_bg.png");
}
运行实例 »点击 "运行实例" 按钮查看在线实例
如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
提示：如需垂直重复图像，请设置 background-repeat: repeat-y;。
background-repeat 属性还可指定只显示一次背景图像：
背景图像仅显示一次：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。
background-position 属性用于指定背景图像的位置。
把背景图片放在右上角：
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
精选课程
共5课时
17.2万人学习
共49课时
77.2万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.1万人学习
共25课时
61.8万人学习
共22课时
23万人学习
共28课时
34万人学习
共89课时
125.5万人学习
