位置: IT常识 - 正文
目录
CSS 定义了两种渐变类型:
格式:
如何使用:
编辑使用透明度:
推荐整理分享【CSS应用篇】——CSS如何实现渐变背景(css如何应用),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:css用法详解,css.,css应用实例,css的应用是什么?,css如何应用,css如何应用,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 top90deg: 90度->to right180deg:180度->to bottom270deg:270度->to left下一篇:cat命令 在终端设备上显示文件内容(终止cat命令)
友情链接: 武汉网站建设