背景图从上到下逐渐变淡

今天写项目时突然碰到一个问题，就是背景图需要从上到下逐渐变淡。还有就是从左上逐渐变淡到右下。想了一下把这个问题发出来以供小白使用

背景图是有上到下逐渐变淡的

<div style="width: 100%;height: 140px;background-image:linear-gradient(rgb(254,244,235),rgb(255,255,255));border-radius: 5px;padding: 10px">

linear-gradient是线性渐变函数，默认就是从上到下所以不用写方向。

而他们三个top则是从左上角到右下角颜色变深，因为颜色相近没有太明显

修改了一下颜色就很明显了

<span style="background: linear-gradient(to bottom right, #fda796 , #fe8359);color: #ffffff;border-radius: 3px 0 3px 3px;font-weight: 600; font-style:oblique;font-size: 18px;padding: 3px 5px;">Top1</span>

拿top1来举例，使用linear-gradient线性渐变函数后，在括号中首先加入方向，to bottom right就是到右下方，右下方的反方向是左上方，就是需要在线性渐变函数中需要写的是最后渐变结束的地方。