HTML 中的线性渐变颜色长度不起作用
Pus*_*pam 0 html css linear-gradients
我正在尝试使用 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 为red10%。由于您没有另外指定，浏览器假定您想要 0-10% 的红色。
您还说过您希望将颜色更改为green，但尚未定义应该发生的点，因此浏览器假定 div 的结尾（或 100%）。
要获得您正在寻找的效果，您需要这样的东西：
background: linear-gradient(red, green 20%);
这从red（0%）开始，然后green在达到 20% 标记时逐渐消失，然后从那时起继续green（到 100%）。