带有偏移量的 CSS 背景渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16885690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Background Gradient with offset
提问by Julian F. Weinert
I applied a gradient as background image to my body. Then I added 255px offset at the top using background-position:0 255px;.
我将渐变作为背景图像应用于我的身体。然后我使用background-position:0 255px;.
It looks quite good except one little issue: of course the gradient does not end at the bottom of the page but 255px underneath.
除了一个小问题外，它看起来相当不错：当然渐变不会在页面底部结束，而是在 255px 下方。
Is there any easy way to let the gradient end at the bottom but start with offset from to?
有没有什么简单的方法可以让渐变在底部结束，但从偏移量开始？
回答by gkalpak
You can achieve what you want like this: Place your background at 0px 0pxand define a gradient with more color-stops, having one solid color area at the top and then the actual gradient, like this:
你可以像这样实现你想要的：把你的背景放在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). */
);
(The sample code works on latest versions of Chrome and FireFox, but adapting it to support all major browsers and versions is straight-forward, applying the same principle.)
（示例代码适用于最新版本的 Chrome 和 FireFox，但将其调整为支持所有主要浏览器和版本是直接的，应用相同的原则。）
See, also, this short demo.
另请参阅此简短演示。
