如何使用 CSS 设置背景图片的大小?

cssweb developmentfront end technology更新于 2024/3/22 3:24:17

使用 CSS，我们可以使用"background-image"属性为 HTML 元素设置背景图片。此外，添加背景图片后，还需要设置其尺寸。

我们可以使用 CSS 的"background-size"属性设置背景图片的大小。

语法

用户可以按照以下语法使用 CSS 设置背景图片的大小。

background-size: width length | width | contain | inherit | cover | initial

我们可以使用上述值来设置背景图片的大小。这里，我们已经解释了所有值的含义。

width 长度 − 设置背景图片的宽度和高度。用户可以使用像素、百分比或 rem 作为宽度和长度值。
宽度 - 仅设置图像的宽度，并将高度设置为"自动"。
包含 - 用于设置 HTML 元素的背景图像，而不会减小背景图像的尺寸。
继承 - 从父元素的背景图像继承背景图像的大小。
覆盖 - 设置背景图像的尺寸，使其能够适应 HTML 元素。

示例 1

在下面的示例中，我们为 HTML div 元素设置背景图像。 div 元素的尺寸为 500 x 300。我们使用 background-size 属性将背景图片设置为 200 x 200。

在输出中，用户可以观察到背景图片的尺寸小于 div 元素。此外，我们还使用了 CSS 属性"background-repeat: no-repeat"来避免重复。

<html>
<head>
   <style>
      .div {
         background-image: url("https://www.cainiaomax.com/css/images/css-mini-logo.jpg");
         background-size: 200px 200px;
         width: 500px;
         height: 300px;
         border: 1px solid blue;
         background-repeat: no-repeat;
      }
   </style>
</head>
<body>
   <h3>Using the background-size CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

示例 2

在下面的示例中，我们使用了 CSS 属性"background-size: cover"来设置背景图像的尺寸。

在输出中，我们可以观察到背景图像与 div 元素完全贴合。但是，当我们将 background-size 设置为 cover 时，一些图像边缘被剪切了。

<html>
<head>
   <style>
      .div {
         background-image: url("https://i.pinimg.com/736x/91/aa/88/91aa882cdcb4632063535e86c829d3ba.jpg");
         background-size: cover;
         width: 500px;
         height: 500px;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

示例 3

在下面的示例中，我们使用了 CSS 属性"background-size: contian"来设置背景图像的大小。

在输出中，我们可以看到它设置了背景图像，并且没有抑制图像的尺寸。

<html>
<head>
   <style>
      .div {
         background-image: url("https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__480.png");
         background-size: contain;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: contain </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

示例 4

在下面的示例中，我们仅将宽度作为"background-size"属性的值。每当我们仅使用一个"background-size"属性值时，它会将高度设置为"自动"，用户可以在输出中看到这一点。

<html>
<head>
   <style>
      .div {
         background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg");
         background-size: 20rem;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: length auto </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

用户学习了如何使用 CSS 设置背景图片的大小。我们可以设置自定义尺寸来设置背景图片。此外，我们可以将背景图片的宽度和高度设置为"auto"。如果用户希望使用背景覆盖整个 HTML 元素，则应将 background-size 属性的值设置为"cover"。