网站正文背景与 3 种水平颜色

如何解决网站正文背景与 3 种水平颜色

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

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

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

From top to bottom. 15% white,then 50% black then 35% white. The color must cover the entire width of the page.

我试过这个代码。然而，颜色的高度只覆盖了页面的一小部分。

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;   
}

解决方法

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

给你：

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

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

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

<body>

</body>

</html>

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

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

它非常简洁，包含精心编写的参考资料和示例。

添加步骤以消除颜色升级

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>

网站正文背景与 3 种水平颜色

如何解决网站正文背景与 3 种水平颜色

解决方法

相关推荐