我有一个渐变背景。当页面缩放时，渐变不起作用，仅显示背景色。
示例代码:
<html>
<head>
<style type="text/css">
body {
background: linear-gradient(to bottom, #0c8530 0%, #0c6027 200px, #0c6027 100%) no-repeat scroll 0% 0% #0c6027;
}
div {
height: 200px;
}
</style>
</head>
<body>
<div>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</div>
</body>
</html>
fiddle :http://jsfiddle.net/3vLBb/
滚动时看起来像这样:
即使页面滚动，渐变也能按预期工作吗？
最佳答案
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
body{
background: -webkit-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* Standard syntax */
}
关于html - 在浏览器中滚动时，CSS 背景渐变不会覆盖背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25058530/