页面布局（5）：body背景为切片②大家好，我是梅巴哥er。上篇介绍了背景切片的其中一种形式（点击查看页面布局（4）：b

大家好，我是梅巴哥er。上篇介绍了背景切片的其中一种形式（点击查看页面布局（4）：body背景为切片①）。本篇介绍另外一种形式。即自适应形式。

看过上篇博文后，本篇就可以直接写代码了。

我们直接来看效果和代码：

在这里插入图片描述

代码

<!--demo.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>huya activity</title>
  <link rel="stylesheet" href="demo.css">
</head>
<body>
  <div class="bg">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
  </div>
  <div class="test">这里添加测试内容，这里添加测试内容，这里添加测试内容，这里添加测试内容，这里添加测试内容，</div>
</body>
</html>

/*css.demo*/

* {
  padding: 0;
  margin: 0;
}

.bg {
  position: absolute;
  width: 100%;
}

.bg1 {
  height: 1024px;
  background: url('./images/bg1.webp') no-repeat center center;
}

.bg2 {
  height: 918px;
  background: url('./images/bg2.webp') no-repeat center center;
}

.bg3 {
  height: 668px;
  background: url('./images/bg3.webp') no-repeat center center;
}

.test {
  position: relative;
  color: #fff;
  background-color: red;
}

以上。