带偏移的 CSS 背景渐变

Posted 2023-05-08

【中文标题】带偏移的 CSS 背景渐变

【英文标题】：CSS Background Gradient with offset

【发布时间】：2013-05-28 22:50:27

【问题描述】：

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

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

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

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

【问题讨论】：

你试过我的建议了吗？有效果吗？您还面临问题吗？

【参考方案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，但调整它以支持所有主要浏览器和版本是直接的，应用相同的原则。）

另请参阅此short demo。