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

问题描述 投票：0回答：1

我试图用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

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

css html5 linear-gradients
1个回答
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％）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.