好的，说里面的内容<body>总计高300像素。如果我设置<body>使用-webkit-gradient或的背景-moz-linear-gradient然后，我将窗口最大化（或使其高度大于300px），渐变将恰好是300px高（内容的高度），然后重复进行以填充窗口的其余部分。我假设这不是错误，因为在webkit和gecko中都是相同的。但是，是否有一种方法可以使渐变拉伸以填充窗口而不是重复？
3 回答
芜湖不芜
TA贡献1796条经验 获得超7个赞
这是我为解决此问题所做的工作...它将显示整个内容长度的渐变，然后简单地回退到背景色（通常是渐变中的最后一种颜色）。
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}
<body>
<h1>Hello world!</h1>
</body>
我已经在FireFox 3.6，Safari 4和Chrome中对此进行了测试，对于某些出于某种原因不支持HTML标记样式的浏览器，我将背景颜色保留在主体中。
- 3 回答
- 0 关注
- 1338 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消