我正在尝试使用“background-attachment：fixed”制作具有百分比断点的线性渐变。它没有像我预期的那样工作。
我对我的问题做了一个非常简单的小提琴。
https://jsfiddle.net/f8v1h0ac/
HTML
<body>
<header>
Header
</header>
<main>
Main
</main>
</body>
CSS
body {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 300px;
background-attachment: fixed;
/* background-image: linear-gradient(to bottom, black 0px, white 300px); */
/* The code above is working but the code below is not. Note that the color at the bottom line of header is supposed to be white. */
background-image: linear-gradient(to bottom, black 0%, white 100%);
}
main {
height: 2000px;
}
PS：我想这是因为渐变的高度与窗口高度相对应。但我不知道如何解决这个问题。