想要实现如下的背景渐变效果，应该怎么做
从#FFFFFF 渐变到 #999999，大概在高度80%的位置开始渐变，一开始想到这样写
background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 80%, #999999 80%, #999999 100%);
但是这种解析出来如下图所示
可见中间没有渐变而是生硬的切换，这不是我们想要的效果。想想如下渐变默认是什么效果。
background: linear-gradient(to bottom, red, green);
可见是从上到下，颜色从 red 到 green 的过渡，red 和 green似乎各占一半的空间。
最后使用如下代码实现效果
background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 80%, #999999 150%, #999999 100%);
等价与:
background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 80%, #999999 150%);
这里可以理解为从上到下渐变，从80%处开始渐变到到#999999,如果直接渐变到 #999999 100%,则又是还是会比较生硬，可考虑让颜色#999999再往下扩展一些，这样看起来颜色就会淡很多可以理解为饱和度减少了。
本文由 dealdot ＜dealdot＃163.com＞ 创作, Full Stack Developer @ DeepBlue
本文最后编辑时间为: Mar 29, 2024 at 23:18 pm
转载请注明来源