HTML 中的线性渐变颜色长度不起作用

Question

我正在尝试使用 CSS 在 HTML 中创建渐变背景。渐变应该从顶部开始有 10% 的红色，其余部分 (80%) 应该是绿色，如下所示：

为此，我编写了以下代码：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body{margin: 0; padding:0;}
        </style>
    </head>
    <body>
        <div style="position: fixed; z-index: 1; background: linear-gradient(red 10%, green); height: 100%; width:100%"></div>
    </body>
    <script>
    </script>
</html>

但是，我得到了这个输出：

请告诉我我的代码有什么问题以及如何实现我的objective。

Answer 1

您正在定义特定点的颜色。所以在你的情况下...

 background: linear-gradient(red 10%, green);

这意味着 div 是 red 的 10%。由于您没有另外指定，浏览器假定您想要 0-10% 的红色。

您还说过要将颜色更改为 green，但尚未定义应该发生这种情况的点，因此浏览器假定 div（或100%).

要获得您想要的效果，您需要这样的东西：

background: linear-gradient(red, green 20%);

这从 red（0%）开始，然后在达到 20% 标记时逐渐变为 green，然后从那时起继续 green（到 100 %).

HTML 中的线性渐变颜色长度不起作用

Linear gradient colour length in HTML not working

html

css

linear-gradients