具有 3 种水平颜色的网站正文背景 [重复]答案

【问题标题】：Website body background with 3 horizontal colours [duplicate]具有 3 种水平颜色的网站正文背景 [重复]
【发布时间】：2021-06-28 17:51:45
【问题描述】：

有没有办法使用 CSS 在网页上显示 3 种不同大小的不同水平颜色？

我正在为一个俱乐部创建一个网页，并希望通过对比鲜明的白色和黑色背景使其更加突出。

我希望它看起来像这样，颜色之间不会褪色：

我已经尝试过这段代码。但是，颜色的高度只覆盖了页面的一小部分。

body {
height: 100vh
width: 100vw;    
background-image: linear-gradient(white 10%, black 50%, white 40%);
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0px;   
}

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

从您提供的图片来看，它似乎按预期工作。渐变的第一段是白色，中间是黑色，第三段是白色。如果要确保渐变填充整个页面并随视口流动，可以使用background-attachment。

给<body> 一个background-attachment 值fixed。这将使background-image 位置固定在视口内。我更新了linear-gradient 的用法，因此通过使用颜色停止点，颜色不会在部分之间褪色。这是通过定义渐变线的开始和结束位置来实现的。渐变中的每个部分都不会流入它的相邻颜色，而是显示颜色之间的明显区别。

body {
  min-height: 100vh;
  height: 100%;
  width: 100vw; 
  background-image: linear-gradient(to bottom, red 10%, green 10% 60%, blue 60%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0px;   
}

<body>
  <div></div>
</body>

【讨论】：

@rodger 如果我的回答解决了您的问题，请随时将我的回答标记为已接受。

【解决方案2】：

给你：

html {
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 65%, rgba(255, 255, 255, 1) 65%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Gradient</title>
</head>

<body>

</body>

</html>

解决方案是减轻渐变效果，这很奇怪，因为这就是它们的用途。我们需要告诉linear-gradient，黑色正好在白色结束之后开始，并且正好在白色开始之前结束。

我通常使用这个网站来设计渐变：https://cssgradient.io

它非常简洁，包含编写良好的参考和示例。

【讨论】：

【解决方案3】：

添加消除颜色升级的步骤

body {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    background: linear-gradient(
        to bottom,
        white 0,
        white 10%,
        black 10%,
        black 60%,
        white 60%,
        white 100%
    );
}

<body>
</body>

【讨论】：