CSS 背景重复 详解
css3基础 2022-05-23 12:01:50小码哥的IT人生shichen
CSS 背景重复
CSS background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像。
某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：
示例代码：
body { background-image: url("gradient_bg.png"); }
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>奇怪的背景图片...</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：
示例代码：
body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>在这里，背景图像仅在水平方向上重复！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：如需垂直重复图像，请设置 background-repeat: repeat-y;。
CSS background-repeat: no-repeat
background-repeat 属性还可指定只显示一次背景图像：
示例代码：
背景图像仅显示一次：
body { background-image: url("tree.png"); background-repeat: no-repeat; }
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/photo/tree.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>phpcodeweb 背景图像实例。</p>
<p>这幅背景图像仅显示一次，但它会打扰读者！</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。
CSS background-position
background-position 属性用于指定背景图像的位置。
示例代码：
把背景图片放在右上角：
body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; }
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/photo/tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>phpcodeweb 不重复并设置位置的背景实例。</p>
<p>现在，背景图像仅显示一次，并且位置与文本分开。</p>
<p>在此例中，我们还在右侧添加了外边距，因此背景图片将永远不会干扰文本。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
