CSS Background 设置高度|极客教程

CSS Background 设置高度

在网页设计中，背景图像是一个非常重要的元素，可以为网页增添美感和视觉效果。在CSS中，我们可以使用background属性来设置背景图像的样式和位置。本文将详细介绍如何使用CSS的background属性来设置背景图像的高度。

1. 设置背景图像的高度

在CSS中，我们可以使用background-size属性来设置背景图像的大小。其中，background-size属性可以接受不同的值，包括长度值、百分比值、cover和contain等。下面是一些示例代码，演示如何使用background-size属性来设置背景图像的高度。

示例1：使用长度值设置背景图像的高度

<!DOCTYPE html>
<html>
<head>
<style>
  .bg {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-size: 200px 300px;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们使用长度值200px 300px来设置背景图像的高度为300px，宽度为200px。可以看到，背景图像的高度被设置为300px。

示例2：使用百分比值设置背景图像的高度

<!DOCTYPE html>
<html>
<head>
<style>
  .bg {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-size: 50% 100%;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们使用百分比值50% 100%来设置背景图像的高度为100%（与容器高度相同），宽度为50%（与容器宽度的一半）。可以看到，背景图像的高度被设置为与容器高度相同。

示例3：使用cover和contain设置背景图像的高度

<!DOCTYPE html>
<html>
<head>
<style>
  .bg-cover {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-size: cover;
    height: 300px;
    width: 200px;
  }

  .bg-contain {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-size: contain;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg-cover"></div>
  <div class="bg-contain"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们分别使用cover和contain值来设置背景图像的高度。cover值会保持背景图像的宽高比，并尽可能填充整个容器，可能会裁剪部分图像；contain值会保持背景图像完整显示在容器内，可能会留有空白区域。

2. 设置背景图像的重复方式

除了设置背景图像的大小，我们还可以使用background-repeat属性来设置背景图像的重复方式。background-repeat属性可以接受不同的值，包括repeat、repeat-x、repeat-y和no-repeat等。下面是一些示例代码，演示如何使用background-repeat属性来设置背景图像的重复方式。

示例4：使用repeat设置背景图像的重复方式

<!DOCTYPE html>
<html>
<head>
<style>
  .bg-repeat {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-repeat: repeat;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg-repeat"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们使用repeat值来设置背景图像在水平和垂直方向上重复显示。可以看到，背景图像被平铺重复显示。

示例5：使用repeat-x和repeat-y设置背景图像的重复方式

<!DOCTYPE html>
<html>
<head>
<style>
  .bg-repeat-x {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-repeat: repeat-x;
    height: 300px;
    width: 200px;
  }

  .bg-repeat-y {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-repeat: repeat-y;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg-repeat-x"></div>
  <div class="bg-repeat-y"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们分别使用repeat-x和repeat-y值来设置背景图像在水平和垂直方向上重复显示。repeat-x值会使背景图像在水平方向上重复显示，repeat-y值会使背景图像在垂直方向上重复显示。

示例6：使用no-repeat设置背景图像的重复方式

<!DOCTYPE html>
<html>
<head>
<style>
  .bg-no-repeat {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-repeat: no-repeat;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg-no-repeat"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们使用no-repeat值来设置背景图像不重复显示。可以看到，背景图像只显示一次，不会重复出现。

3. 设置背景图像的位置

除了设置背景图像的大小和重复方式，我们还可以使用background-position属性来设置背景图像的位置。background-position属性可以接受不同的值，包括长度值、百分比值和关键字值等。下面是一些示例代码，演示如何使用background-position属性来设置背景图像的位置。

示例7：使用长度值设置背景图像的位置

<!DOCTYPE html>
<html>
<head>
<style>
  .bg-position {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-position: 50px 100px;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg-position"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们使用长度值50px 100px来设置背景图像的位置，距离容器左边缘50px，距离容器上边缘100px。可以看到，背景图像被设置在指定位置。

示例8：使用百分比值设置背景图像的位置

<!DOCTYPE html>
<html>
<head>
<style>
  .bg-position {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-position: 50% 50%;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg-position"></div>
</body>
</html>

Output:

CSS Background 设置高度

在上面的示例中，我们使用百分比值50% 50%来设置背景图像的位置，使其居中显示在容器中。可以看到，背景图像被居中显示。

示例9：使用关键字值设置背景图像的位置

<!DOCTYPE html>
<html>
<head>
<style>
  .bg-position {
    background-image: url('https://static.deepinout.com/gk-static/logo.png');
    background-position: center;
    height: 300px;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="bg-position"></div>
</body>
</html>

Output:

CSS Background 设置高度