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

时间:2019-03-28 14:52:54

标签: css html5 linear-gradients

我正在尝试使用CSS在HTML中创建渐变背景。渐变的顶部应该是10%的红色,其余部分(80%)应该是绿色,例如:
enter image description here

为此,我编写了以下代码:

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

但是,我得到以下输出:
enter image description here

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

1 个答案:

答案 0 :(得分:4)

您正在定义特定点的颜色。所以就您而言...

 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%)