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>

但是，我得到以下输出：

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

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中的线性渐变颜色长度不起作用

1 个答案: