css - 纯色作为页面前 5% 的背景，其余为图像

Question

是否可以使用 CSS 将页面前 5% 的背景设置为纯色，并为其余 65% 和 30% 设置两个不同的背景图像？

这是我需要的样子:

Answer 1

编辑 2:所以有很多方法可以实现这一点。

1. 伪元素:我认为这是最好的方法，因为它避免了标记中的额外元素并且可以很好地控制缩放/裁剪。 示例如下。

2. 多个容器: 就像伪元素一样工作，但在标记中增加了额外元素的缺点。对旧浏览器的最佳支持，但如今，伪元素得到了很好的支持。 示例如下。

3. 多背景:这可能适用于纯色或渐变，但对于大多数图像，如果使用百分比大小，则缩放和裁剪会出现问题。 示例如下。

---

1。伪元素

只需将 ::before 和 ::after 伪元素添加到 pagewrapper，提供背景图像，并相应地定位。

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.pagewrap {
  position: relative;
  height: 100%;
  background-color: green;
}
.pagewrap::before {
 content: "";
 position: absolute;
 top: 5%;
 left: 0;
 height: 65%;
 width: 100%;
 background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
 background-size: cover;
 background-position: center;
}
.pagewrap::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 height: 30%;
 width: 100%;
 background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
 background-size: cover;
 background-position: center;
}

<div class="pagewrap">
</div>

---

2。多个容器

只需将上面示例中的伪元素替换为 html 中的容器 div。

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.pagewrap {
  position: relative;
  height: 100%;
  background-color: green;
}
.mid65 {
 position: absolute;
 top: 5%;
 left: 0;
 height: 65%;
 width: 100%;
 background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
 background-size: cover;
 background-position: center;
}
.btm30 {
 position: absolute;
 bottom: 0;
 left: 0;
 height: 30%;
 width: 100%;
 background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
 background-size: cover;
 background-position: center;
}

<div class="pagewrap">
    <div class="mid65"></div>
    <div class="btm30"></div>
</div>

---

3。多个背景图片

使用多个背景图片:
背景图片:url("image1.jpg"), url(image2.jpg);

然后使用相同的逗号分隔语法
for background-repeat: no-repeat, no-repeat; (相同的值不需要重复)和 背景大小:100% 30%，100% 65%；，等..

不过，背景位置是棘手的部分，因为它似乎并不像人们预期的那样工作(Temani Afif 在下面的评论中提供了非常有用的信息 link)。但这似乎达到了 5% 65% 30% 的预期结果:
背景位置:左下角，0% 15%；

Edit: Replaced gradients with actual images so you can see how image stretching may be an issue with this method. More suitable for solid colors or gradients.

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.pagewrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: blue;
  background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg"), url("https://i.postimg.cc/nckTrT6T/21.jpg");
  background-size: 100% 30%, 100% 65%;
  background-position: bottom left, 0% 15%;
  background-repeat: no-repeat;
}

<div class="pagewrap"></div>