带偏移的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。
相关文章