CSS background-repeat背景重复|极客教程

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>

代码运行结果:

CSS background-repeat背景重复

在这个示例中，我们将一个背景图片设置为整个页面的背景，并使用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>

代码运行结果:

CSS background-repeat背景重复

在这个示例中，我们将背景图片只在水平方向上重复，而不在垂直方向上重复。运行这段代码，你会看到背景图片在页面上水平方向上重复出现。

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>

代码运行结果:

CSS background-repeat背景重复

在这个示例中，我们将背景图片只在垂直方向上重复，而不在水平方向上重复。运行这段代码，你会看到背景图片在页面上垂直方向上重复出现。

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>