页面顶部5％的纯色为背景，其余部分为图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面顶部5％的纯色为背景，其余部分为图像相关的知识，希望对你有一定的参考价值。
是否有可能使用CSS将页面顶部5％的背景设置为纯色，并为剩余的65％和30％设置两个不同的背景图像？
这是我需要的外观：
答案
编辑2：因此，有很多方法可以完成此任务。
Pseudo elements：我认为这是最好的方法，因为它避免了标记中多余的元素，并且可以很好地控制缩放/裁剪。 下面的例子。
[multiple container：的工作原理与伪元素类似，但缺点是标记中多余的元素。跨旧浏览器的最佳支持，但如今，伪元素得到了很好的支持。 下面的例子。
[多背景：这可能适用于纯色或渐变，但是对于大多数图像，如果使用百分比作为尺寸，则缩放和裁切将成问题。 下面的例子。
1。伪元素
只需将::before和::after伪元素添加到页面包装程序中，提供背景图像并相应地定位。
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>以上是关于页面顶部5％的纯色为背景，其余部分为图像的主要内容，如果未能解决你的问题，请参考以下文章
是否可以在视图上设置背景 png 并将其锚定到顶部而不在 Android 中缩放？