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

背景图从上到下逐渐变淡_背景图

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

<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是线性渐变函数,默认就是从上到下所以不用写方向。

背景图从上到下逐渐变淡_线性渐变_02

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

背景图从上到下逐渐变淡_背景图_03

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

<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就是到右下方,右下方的反方向是左上方,就是需要在线性渐变函数中需要写的是最后渐变结束的地方。