极客教程CSS background: 背景图片拉伸铺满
在网页设计中，背景图片是一个非常重要的元素，可以为网页增添美感和个性。在CSS中，我们可以通过background属性来设置背景图片，并且可以控制背景图片的显示方式。本文将详细介绍如何使用CSS中的background属性来实现背景图片拉伸铺满的效果。
1. 背景图片拉伸铺满整个元素
有时候我们希望背景图片可以完全覆盖整个元素，无论元素的大小如何变化，背景图片都能够拉伸铺满。这时可以使用background-size属性来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个宽度为300px，高度为200px的div元素，并设置了背景图片为bg.jpg，然后使用background-size: cover;来让背景图片拉伸铺满整个元素。运行代码后，可以看到背景图片完全覆盖了整个div元素。
2. 背景图片拉伸铺满整个页面
有时候我们希望背景图片可以完全覆盖整个页面，无论页面的大小如何变化，背景图片都能够拉伸铺满。这时可以使用background-size属性和100% 100%值来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: 100% 100%;
}
</style>
</head>
<body>
</body>
</html>
在上面的示例中，我们设置了body元素的背景图片为bg.jpg，然后使用background-size: 100% 100%;来让背景图片拉伸铺满整个页面。运行代码后，可以看到背景图片完全覆盖了整个页面。
3. 背景图片水平拉伸，垂直居中
有时候我们希望背景图片在水平方向拉伸铺满，但在垂直方向居中显示。这时可以使用background-size属性和center值来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: auto 100%;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个宽度为300px，高度为200px的div元素，并设置了背景图片为bg.jpg，然后使用background-size: auto 100%;来让背景图片在水平方向拉伸铺满，background-position: center;来让背景图片在垂直方向居中显示。运行代码后，可以看到背景图片水平拉伸铺满，垂直居中显示。
4. 背景图片垂直拉伸，水平居中
有时候我们希望背景图片在垂直方向拉伸铺满，但在水平方向居中显示。这时可以使用background-size属性和center值来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Stretch</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: 100% auto;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个宽度为300px，高度为200px的div元素，并设置了背景图片为bg.jpg，然后使用background-size: 100% auto;来让背景图片在垂直方向拉伸铺满，background-position: center;来让背景图片在水平方向居中显示。运行代码后，可以看到背景图片垂直拉伸铺满，水平居中显示。
5. 背景图片平铺
除了拉伸铺满，我们还可以让背景图片平铺显示。这时可以使用background-repeat属性来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Repeat</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个宽度为300px，高度为200px的div元素，并设置了背景图片为bg.jpg，然后使用background-repeat: repeat;来让背景图片平铺显示。运行代码后，可以看到背景图片在水平和垂直方向都平铺显示。
6. 背景图片水平平铺，垂直居中
有时候我们希望背景图片在水平方向平铺显示，但在垂直方向居中显示。这时可以使用background-repeat属性和background-position属性来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Repeat</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat-x;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个宽度为300px，高度为200px的div元素，并设置了背景图片为bg.jpg，然后使用background-repeat: repeat-x;来让背景图片在水平方向平铺显示，background-position: center;来让背景图片在垂直方向居中显示。运行代码后，可以看到背景图片在水平方向平铺显示，垂直居中显示。
7. 背景图片垂直平铺，水平居中
有时候我们希望背景图片在垂直方向平铺显示，但在水平方向居中显示。这时可以使用background-repeat属性和background-position属性来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Repeat</title>
<style>
.container {
width: 300px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat-y;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个宽度为300px，高度为200px的div元素，并设置了背景图片为bg.jpg，然后使用background-repeat: repeat-y;来让背景图片在垂直方向平铺显示，background-position: center;来让背景图片在水平方向居中显示。运行代码后，可以看到背景图片在垂直方向平铺显示，水平居中显示。
8. 背景图片平铺并固定
有时候我们希望背景图片在页面滚动时保持固定不动，同时平铺显示。这时可以使用background-attachment属性来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Fixed</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
在上面的示例中，我们设置了body元素的背景图片为bg.jpg，然后使用background-repeat: repeat;来让背景图片平铺显示，background-attachment: fixed;来让背景图片固定不动。运行代码后，可以看到背景图片在页面滚动时保持固定不动，并且平铺显示。
9. 背景图片平铺并重复
有时候我们希望背景图片在页面滚动时重复显示，而不是固定不动。这时可以使用background-attachment属性来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Scroll</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-repeat: repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
</body>
</html>
在上面的示例中，我们设置了body元素的背景图片为bg.jpg，然后使用background-repeat: repeat;来让背景图片重复显示，background-attachment: scroll;来让背景图片随页面滚动而滚动。运行代码后，可以看到背景图片在页面滚动时重复显示。
10. 背景图片固定并拉伸
有时候我们希望背景图片在页面滚动时保持固定不动，并且拉伸铺满整个页面。这时可以结合使用background-attachment属性和background-size属性来实现。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Fixed and Stretch</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
在上面的示例中，我们设置了body元素的背景图片为bg.jpg，然后使用background-size: cover;来让背景图片拉伸铺满整个页面，background-attachment: fixed;来让背景图片固定不动。运行代码后，可以看到背景图片在页面滚动时保持固定不动，并且拉伸铺满整个页面。