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

最新推荐文章于 2024-06-20 11:21:40 发布

左手喵子

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量801

点赞数 3

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136100572

版权

20 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中linear-gradient函数的使用，包括不同方向的渐变（如从上到下、从左到右），以及如何设置两个或三个颜色的渐变，并演示了如何为渐变添加透明度。

摘要由CSDN通过智能技术生成

渐变背景： 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%);

展示效果如下：

关注

专栏目录