html - 页面背景为 90% 白色和 10% 缩放图像

Question

我想做以下事情，但到目前为止，我自己既没有让它工作，也没有在网上找到类似的东西。我正在构建一个不可滚动的页面，我想要一个白色背景，但带有 rainbow stripe在页面底部。

我有点让它像这样与 div 一起工作(我尝试将它作为整个页面的背景，但它会模糊，因为 css 不会裁剪图像，而是压缩它):

.rainbow {
    position: fixed;
    height: 10%;
    width: 100%;
    bottom: 0px;
    background: white url('../img/rainbow.jpg') no-repeat bottom fixed;
    background-size: contain;
}

但是这段代码的问题是，它无法正确缩放:通过某个点，图像始终不可见，因为它在两侧(左侧和右侧)被切割，高度起作用。

希望你们都知道我想做什么。 提前致谢

Answer 1

您可以使用 HTML 和 CSS 来实现此目的，而不是使用图像。

.rainbow {
  position: fixed;
  height: 10%;
  width: 100%;
  bottom: 0px;
}

.color {
  position: relative;
  float: left;
  height: 100%;
  width: calc(100% / 6);
}

#blue {
  background: blue;
}

#green {
  background: green;
}

#yellow {
  background: yellow;
}

#orange {
  background: orange;
}

#red {
  background: red;
}

#purple {
  background: purple;
}

<div class="rainbow">
  <div id="blue" class="color"></div>
  <div id="green" class="color"></div>
  <div id="yellow" class="color"></div>
  <div id="orange" class="color"></div>
  <div id="red" class="color"></div>
  <div id="purple" class="color"></div>
</div>