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

Question

我想做以下事情，直到现在我自己都没有得到它，也没有在网上找到类似的东西。我正在构建一个不可滚动的页面，我想要一个白色背景，但页面底部有一条彩虹条纹。

我有点让它像这样与 div 一起工作（我尝试将它作为整个页面的背景，但它变得模糊，因为 css 不会裁剪图像，它会压缩它）：

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

但是这段代码的问题是，它不能正确缩放：通过某个点，图像一直不可见，因为它在两侧（左和右）都被切割，高度有效。

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

标签： htmlcsssass

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>