CSS背景图片填充div|极客教程

CSS背景图片填充div

在网页开发中，背景图片是一种常见的布局方式，可以通过CSS来给元素添加背景图片。但是在设置背景图片时，经常会遇到图片尺寸与元素尺寸不一致的问题。本文将详细介绍如何使用CSS来填充div元素的背景图片，以实现不同效果的布局需求。

背景图片填充整个div

如果希望背景图片填充整个div元素，可以通过设置background-size属性来实现。background-size属性用于控制背景图片的尺寸，有以下几种取值：

cover：背景图片将被放大或缩小，以完全覆盖元素。
contain：背景图片将被缩放以完全装入元素，可能会有部分空白。

下面是一个示例代码，展示了如何使用cover值来填充整个div元素的背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Cover</title>
<style>
  .container {
    width: 300px;
    height: 200px;
    background-image: url('background.jpg');
    background-size: cover;
  }
</style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

在上面的代码中，通过设置.container类的background-size属性为cover，背景图片将被拉伸或缩放，以填充整个div元素。效果如下图所示：

╔═════════════════════════════════════════╗
║                                         ║
║                 背景图片                  ║
║                                         ║
╚═════════════════════════════════════════╝

背景图片填充div并保持比例

有时候，我们希望背景图片填充整个div元素，并保持图片的宽高比例，可以使用background-size属性的contain值。下面是一个示例代码，展示了如何使用contain值来填充div元素并保持图片比例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Contain</title>
<style>
  .container {
    width: 300px;
    height: 200px;
    background-image: url('background.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
</style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

在上面的代码中，通过设置.container类的background-size属性为contain，背景图片将被缩放以完全装入div元素，且保持图片的宽高比例。效果如下图所示：

╔═════════════════════════════════════════╗
║                                         ║
║                背景图片                 ║
║                                         ║
╚═════════════════════════════════════════╝

多个背景图片填充div

除了填充单个背景图片之外，我们还可以给div元素添加多个背景图片。通过设置background-image属性并使用逗号分隔多个图片链接，可以实现在一个div元素上显示多个背景图片。

下面是一个示例代码，展示了如何使用多个背景图片填充div元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Background Images</title>
<style>
  .container {
    width: 300px;
    height: 200px;
    background-image: url('background1.jpg'), url('background2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

在上面的代码中，通过设置.container类的background-image属性为两个背景图片链接，并设置background-size为cover，可以实现在一个div元素上显示多个背景图片。效果如下图所示：

“`css
╔═════════════════════════════════════════╗
║ ║
║ 背景图片1 ║
║ 背景图片2 ║
║ ║
╚══════════