CSS背景渐变与偏移

Question

我将渐变作为背景图像应用到我的身体.然后我在顶部添加了255px偏移量background-position:0 255px;.

它看起来相当不错,除了一个小问题:当然,渐变不会在页面底部结束,而是在底部255px.

是否有任何简单的方法让渐变结束于底部,但从偏移开始？

http://jsfiddle.net/julian_weinert/ar6jC/

Answer 1

您可以实现您想要的效果:将背景放在0px 0px并定义具有更多色标的渐变,顶部有一个纯色区域,然后是实际渐变,如下所示:

background-position: 0px 0px;
background-image: linear-gradient(to bottom, 
    #FFFFFF 0px,     /* Have one solid white area */
    #FFFFFF 255px,   /* at the top (255px high). */
    #C4C7C9 255px,   /* Then begin the gradient at 255px */
    #FFFFFF 100%     /* and end it at 100% (= body's height). */
);  

(示例代码适用于最新版本的Chrome和FireFox,但适应它以支持所有主流浏览器和版本是直截了当的,应用相同的原则.)

另见这个简短的演示.