我应用了线性渐变的背景，它应该从红色开始，当我滚动时显示蓝色，但渐变固定在它的位置

Question

如何应用延伸到div底部的线性渐变，以便在滚动到底部时显示不同的颜色？

div {
height: 200px;
width: 200px;
overflow: auto;
background: linear-gradient(red, blue);
}

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed dolor lerisque massa laoreet at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec euismod augue nibh, ac bibendum tellus tempor nec. Vestibulum anteante.alesuada fames ac turpis egestas. Donec euismod augue nibh, ac bibendum tellus tempor nec. Vestibulum anteante.
e nibh, ac bibendum tellus temp
e nibh, ac bibendum tellus tempor nec. Vestibulum ante
</div>

Answer 1

您可以将background-attachment属性设置为local

div {
height: 200px;
width: 200px;
overflow: auto;
background: linear-gradient(red, blue);
background-attachment: local;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed dolor lerisque massa laoreet at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec euismod augue nibh, ac bibendum tellus tempor nec.
Vestibulum anteante.alesuada fames ac turpis egestas. Donec euismod augue nibh, ac bibendum tellus tempor nec. Vestibulum anteante. e nibh, ac bibendum tellus temp e nibh, ac bibendum tellus tempor nec. Vestibulum ante
</div>