html中如何伸展背景图

在HTML中,背景图的伸展是一个常见的需求，如何实现这一效果呢？今天就来为大家详细讲解一下，我们需要了解背景图的几种伸展方式，然后通过具体的代码示例来展示如何操作，下面我们就开始吧！

背景图伸展方式

在HTML中,背景图的伸展方式主要有以下几种：

背景图默认情况下是平铺的,即图片会自动重复，填满整个元素。
使用CSS中的background-size属性来控制背景图的伸展。

下面,我们将重点介绍如何使用background-size属性来实现背景图的伸展。

使用background-size属性

background-size属性用于设置背景图片的尺寸，它可以取以下值：

cover：背景图片完全覆盖元素，图片可能会被裁剪。
contain：背景图片完整地显示在元素内，图片不会被裁剪，但可能会有空白区域。
width：设置背景图片的宽度，高度会等比例缩放。
height：设置背景图片的高度，宽度会等比例缩放。
auto：默认值，背景图片的原始尺寸。

以下是一个具体的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图伸展示例</title>
    <style>
        .bg {
            width: 100%;
            height: 500px;
            background-image: url('example.jpg');
            background-repeat: no-repeat;
            background-position: center center;
        }
        .cover {
            background-size: cover;
        }
        .contain {
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="bg cover">背景图cover示例</div>
    <div class="bg contain">背景图contain示例</div>
</body>
</html>

在这个例子中,我们创建了两个div元素，分别应用了cover和contain两种背景图伸展方式。