页面布局（4）：body背景为切片①

最新推荐文章于 2023-01-24 23:06:13 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-01-24 23:06:13 发布

阅读量223

点赞数

分类专栏： html CSS

本文链接：https://blog.csdn.net/tuzi007a/article/details/117197721

版权

CSS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

大家好，我是梅巴哥er。本篇介绍一种新的常用布局------body背景为图片切片的布局。

温馨提示

手机端看本文，可能看不到前面三张照片，不过影响不是很大。如果注重实际练习和观感，建议用电脑端看。

布局介绍

这种布局常用在公司活动页面的制作。起初UI给到的一般是一张宽度为1920的完整图片，为了缓解页面压力，我们需要把一张UI背景图，先切片成若干片，然后再放在body作为背景图。

body有了背景图，根据产品需要，布局分为两种情况。

一种是body背景只上不分三栏布局，也不做自适应的布局。即，如果缩小屏幕宽度，控制台直接就遮盖页面，body背景不会缩小自身宽度。
另一种是body背景之上，分三栏布局，中间一栏是内容。当页面宽度缩小时，背景会适当跟着缩小宽度。

文字描述不容易说清楚，这里就仔细讲讲流程。

*注：本篇讲解的是第一种情况。以虎牙活动页面为例。

布局讲解

这里我从虎牙活动页面拿到UI设计背景图，并已经做好了切片。宽度为1920的。

在这里插入图片描述

请添加图片描述

接下来，我们就把这三张图片放进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="bg1"></div>
  <div class="bg2"></div>
  <div class="bg3"></div>
</body>
</html>

/*demo.css*/
* {
  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;
}

此时，打开浏览器，我们看到一个很棒的body背景图。但是到这里算完成了吗？
我们来测试一下。

<!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="bg1"></div>
  <div class="bg2"></div>
  <div class="bg3"></div>
  <div>这里添加测试内容，这里添加测试内容，这里添加测试内容，这里添加测试内容，这里添加测试内容，</div>
</body>
</html>

我们在body里面加了一个div，里面包含了一些文字作为测试内容。我们来看下效果。

在这里插入图片描述

我们的内容出现在了这里。这不是我们的本意。因为我们是想让图片当背景的，结果，这些图片成为了内容，反而把正式的活动内容压在了下面。为了让活动内容和背景图分开，即让背景图脱离文档流，让活动内容凸显出来。所以，我们采用定位属性来重做。
调整一下代码如下：

<!--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>这里添加测试内容，这里添加测试内容，这里添加测试内容，这里添加测试内容，这里添加测试内容，</div>
</body>
</html>

/*demo.css*/
* {
  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;
}

我们再打开浏览器看下效果

在这里插入图片描述
图片倒是正常了，我们的文字内容去哪了呢？

在这里插入图片描述
我们打开控制台可以看到，文字内容是被绝对定位的图片给盖住了。

那我们就需要调整一下。让内容显示出来。那么要怎么解决呢？

这里就牵扯到一个知识点，就是position: relative。

根据MDN的解释，该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

换句话说，加了这个属性和值，页面会在他应该待着的位置留出位置。

那么，我们的代码就做如下改善：

<!--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>

* {
  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;
}

我们来看下效果

在这里插入图片描述

好了。解决了。我们能正常的写活动内容了。
最后一个问题，当页面宽度缩小的时候，此时，背景图还会跟着缩小。而我们这次要做的是，背景图宽度一直不变。所以我们需要让背景图填充满整个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>

/*demo.css*/
* {
  padding: 0;
  margin: 0;
}

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

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

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

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

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

最终效果图

缩小页面宽度，背景图片被遮盖。
简单来说，如果想被遮盖，就给个具体宽度。如果不想被遮盖，就不需要给具体宽度，这样就相当于自适应。
还有position: relative的具体用法。在这里算是核心代码。

在这里插入图片描述

以上。

新生代农民工官方认证码农小拽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面布局（4）：body背景为切片①

大家好，我是梅巴哥er。本篇介绍一种新的常用布局------body背景为图片切片的布局。布局介绍这种布局常用在公司活动页面的制作。起初UI给到的一般是一张宽度为1920的完整图片，为了缓解页面压力，我们需要把一张UI背景图，先切片成若干片，然后再放在body作为背景图。body有了背景图，根据产品需要，布局分为两种情况。一种是body背景只上不分三栏布局，也不做自适应的布局。即，如果缩小屏幕宽度，控制台直接就遮盖页面，body背景不会缩小自身宽度。另一种是body背景之上，分三栏布局，中间一
复制链接

扫一扫

专栏目录