我将渐变作为背景图像应用到我的身体上。然后我在顶部添加了 255px 偏移background-position:0 255px;
.
它看起来相当不错,除了一个小问题:当然渐变不是在页面底部结束,而是在下面 255px 处结束。
有没有什么简单的方法可以让渐变在底部结束但以从 到 的偏移量开始?
http://jsfiddle.net/julian_weinert/ar6jC/ 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,但应用相同的原理,对其进行调整以支持所有主要浏览器和版本是简单的。)
另请参阅此简短的演示 http://jsfiddle.net/ExpertSystem/yyvT3/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)