首页 前端知识 css 渐变背景设置及修改透明度方法

css 渐变背景设置及修改透明度方法

2024-02-27 11:02:39 前端知识 前端哥 450 741 我要收藏

渐变背景: linear-gradient

background: linear-gradient(颜色1, 颜色2); - - - 这种是从上到下,有颜色1过渡为颜色2;

background: linear-gradient(to right,颜色1, 颜色2); - - - 这种是从左到右,有颜色1过渡为颜色2;

预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。

根据具体需求设置渐变方向。

如果设置的方向是 角度 deg, 角度值如下:
0deg - - - 从上到下,
90deg - - - 从左到右,
依次类推~
在这里插入图片描述

示例

① 有三个颜色渐变

background: linear-gradient(角度, 颜色1, 颜色2, 颜色3);

示例:
background: linear-gradient(135deg,#9733FF,#526AFF,#11B9FF);

或者加上颜色变化的具体位置:
background: linear-gradient(135deg, #9733FF 0%, #526AFF 42%, #11B9FF 100%);

在这里插入图片描述

展示效果如下:
在这里插入图片描述

② 有两个颜色渐变
background: linear-gradient(135deg,#9733FF,#11B9FF);
background: linear-gradient(135deg,#9733FF 0%,#11B9FF 100%);

展示效果如下:
在这里插入图片描述

渐变背景设置透明度

颜色值使用 rgba 格式,加上想要设置的透明度 :rgba(…, 透明度),

透明度值 0~1 之间,0指完全透明,1指完全不透明,

例如:
background: linear-gradient(135deg, rgba(151, 51, 255, 0.1) 0%, rgba(82, 106, 255, 0.1) 42%, rgba(17, 185, 255, 0.1) 100%);

展示效果如下:
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2790.html
标签
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!