极客教程CSS background-repeat背景重复
在CSS中，我们可以使用background-repeat属性来控制背景图片的重复方式。这个属性有四个可能的值：repeat、repeat-x、repeat-y和no-repeat。在本文中，我们将详细介绍这四种值的用法，并提供示例代码来演示它们的效果。
repeat
repeat是background-repeat属性的默认值，它会让背景图片在水平和垂直方向上重复平铺。下面是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Repeat - repeat</title>
<style>
body {
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>Background Repeat - repeat</h1>
</body>
</html>
代码运行结果:
在这个示例中，我们将一个背景图片设置为整个页面的背景，并使用repeat值让它在水平和垂直方向上重复平铺。运行这段代码，你会看到背景图片在页面上重复出现。
repeat-x
repeat-x值会让背景图片只在水平方向上重复。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Repeat - repeat-x</title>
<style>
body {
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Background Repeat - repeat-x</h1>
</body>
</html>
代码运行结果:
在这个示例中，我们将背景图片只在水平方向上重复，而不在垂直方向上重复。运行这段代码，你会看到背景图片在页面上水平方向上重复出现。
repeat-y
repeat-y值会让背景图片只在垂直方向上重复。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Repeat - repeat-y</title>
<style>
body {
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Background Repeat - repeat-y</h1>
</body>
</html>
代码运行结果:
在这个示例中，我们将背景图片只在垂直方向上重复，而不在水平方向上重复。运行这段代码，你会看到背景图片在页面上垂直方向上重复出现。
no-repeat
no-repeat值会让背景图片不重复，只显示一次。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Repeat - no-repeat</title>
<style>
body {
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Background Repeat - no-repeat</h1>
</body>
</html>
代码运行结果:
在这个示例中，我们将背景图片设置为不重复，只显示一次。运行这段代码，你会看到背景图片只在页面上显示一次。
通过以上示例代码，我们可以看到background-repeat属性的四种值的不同效果。在实际开发中，根据设计需求选择合适的background-repeat值可以让页面背景更加美观。