我正在尝试使用 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>
但是，我得到了这个输出:
请告诉我我的代码有什么问题以及如何实现我的目标。
最佳答案
您正在定义特定点的颜色。所以在你的情况下......
background: linear-gradient(red 10%, green);
这意味着 div 在 10% 时是红色。由于您没有另外指定，浏览器假设您想要 0-10% 的红色。
您还说过要将颜色更改为 green，但尚未定义应该发生这种情况的点，因此浏览器假定 div 的结尾(或 100%) .
要获得您正在寻找的效果，您需要这样的东西:
background: linear-gradient(red, green 20%);
这从红色(0%)开始，然后在达到 20% 标记时逐渐变为绿色，然后继续绿色 从那时起(到 100%)。
关于css - HTML 中的线性渐变颜色长度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55400625/