带偏移的CSS背景渐变

CSS Background Gradient with offset(带偏移的CSS背景渐变)

问题描述

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

除了一个小问题外，它看起来相当不错：当然渐变不会在页面底部结束，而是在页面下方255px处结束。

是否有什么简单的方法可以让渐变在底部结束，但以偏移量从到开始？

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

推荐答案

您可以这样实现您想要的效果：将背景放在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上运行，但采用相同的原则，对其进行调整以支持所有主要浏览器和版本非常简单。)

另请参阅此short demo。

这篇关于带偏移的CSS背景渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！