背景图从上到下逐渐变淡
  qdIa6ohhDrXg 2023年12月06日 13 0

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

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

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

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

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月06日 0

暂无评论

qdIa6ohhDrXg
作者其他文章 更多