我有一个滚动div,其元素具有固定的背景渐变。
HTML
<div id="wrapper">
<div id="header">
Header
</div>
<div id="body">
<ul>
<li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
CSS
#wrapper {
display: flex;
flex-direction: column;
height: 90vh;
}
#header {
flex: 0 0 50px;
background: cornflowerblue;
}
#body {
flex: 1 1 auto;
overflow-y: scroll;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 10px;
background: linear-gradient(to bottom, red, purple) fixed;
padding: 10px;
border-radius: 10px;
width: 100px;
}
#footer {
flex: 0 0 50px;
background: lightgreen;
}
codepen在这里:
https://codepen.io/swards/pen/XavVpz
这似乎是webkit的一个错误,因为这非常简单并适用于Safari。有人有解决方法吗?