CSS背景图拉伸高度填满|极客教程

CSS背景图拉伸高度填满

在网页开发中，经常会遇到需要在页面中设置背景图的情况。背景图的显示方式有很多种，其中一种比较常见的需求是需要让背景图始终保持填满整个容器的高度。本文将详细介绍如何使用CSS实现背景图拉伸高度填满的效果。

背景图拉伸填满容器的方式

在CSS中，我们可以使用 background-size 属性来设置背景图的大小。其中，background-size 属性可以使用以下几种值来控制背景图的大小：

auto：默认值，背景图保持原始大小
cover：保持背景图的宽高比，将背景图缩放并截取到完全覆盖容器
contain：保持背景图的宽高比，将背景图缩放到完全包含在容器内

我们将使用 cover 这个属性值来实现背景图拉伸填满容器的效果。

实现方法

假设我们有一个容器 <div class="container">，我们希望这个容器的背景图能够填满整个容器的高度。首先，我们需要设置这个容器的高度，可以使用固定高度或者百分比高度。

接着，我们需要给这个容器设置背景图，并使用 background-size: cover; 来让背景图填满容器的高度。具体的CSS代码如下：

.container {
  height: 100vh; /* 设置容器高度为视口高度的100% */
  background-image: url('background.jpg');
  background-size: cover;
}

在这段代码中，height: 100vh; 表示将容器的高度设置为视口高度的100%，也就是整个浏览器窗口的高度。如果你希望容器的高度是容器的父元素的100%，也可以使用百分比来设置高度。

示例

下面我们来看一个完整的示例。假设我们有一个HTML结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图填满容器</title>
<style>
  .container {
    height: 100vh;
    background-image: url('background.jpg');
    background-size: cover;
  }
</style>
</head>
<body>
<div class="container">
  <!-- 这里是容器的内容 -->
</div>
</body>
</html>

在这个示例中，.container 元素的背景图会被拉伸并填满整个容器的高度。你可以替换 background.jpg 为你自己的背景图的路径。