首页 前端知识 【CSS应用篇】——CSS如何实现渐变背景

【CSS应用篇】——CSS如何实现渐变背景

2024-03-12 01:03:09 前端知识 前端哥 988 59 我要收藏

目录

CSS 定义了两种渐变类型:

格式:

如何使用:

​编辑使用透明度:


CSS 定义了两种渐变类型:

  • 线性渐变(向下/向上/向左/向右/对角线);
  • 径向渐变(有中心向周围展开);

格式:

background-image: linear-gradient( 方向/角度 , 颜色1,颜色2,颜色3....);

如何使用:

通过属性 linear-gradient来这样定义一个线性渐变。

案例二:(水平)从左开始的线性渐变。它从红色开始,过渡到黄色:

background: linear-gradient(to right,#333399,#ff00cc);

案例二: (对角)从左上角开始(到右下角)的线性渐变。它从红色开始,过渡到黄色:

background-image: linear-gradient(to bottom right, red, yellow)

使用透明度:

CSS 渐变还支持透明度,也可用于创建渐变效果。

如需添加透明度,我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值,它定义颜色的透明度:0 表示全透明,1 表示全彩色(无透明)。

案例三:从左开始的线性渐变。它开始完全透明,然后过渡为全色红色:

  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

其他方向和角度:

  • to top : 从下向上填充渐变色
  • to right:从左向右填充渐变色
  • to bottom:从上向下填充渐变
  • to left  :从右向左填充渐变色
  • 0deg  : 0度->to top
  • 90deg: 90度->to right
  • 180deg:180度->to bottom
  • 270deg:270度->to left
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3664.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!