使用css3背景渐变中的透明度来设置不同颜色的背景渐变

使用css3背景渐变中的透明度来设置不同颜色的背景渐变

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。rgba()后面的百分比表示位置。

具体代码:


background: -webkit-linear-gradient(top, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Safari、Chrome */

background: -o-linear-gradient(bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Opera */

background: -moz-linear-gradient(bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Firefox */

background: linear-gradient(to bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%); /* 标准的语法(必须放在最后) */


注意:Internet Explorer 9 及之前的版本不支持渐变。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,679评论 0 7
  • 本文转载自:http://southpeak.github.io/2014/12/10/quartz2d-8/ Q...
    idiot_lin阅读 935评论 0 3
  • CSS3简介 CSS3的现状 浏览器支持程度差,需要添加 私有前缀 ; 移动端支持优于PC端; 不断改进中; 应用...
    magic_pill阅读 848评论 0 1
  • 一八四七年,英国小说家、诗人艾米莉·勃朗特的小说《呼啸山庄》以筹款的方式终于获得了出版,在这一年出版的还有...
    一轮红日说文史阅读 998评论 1 3
  • 忍住,挺住! 做住! 无论再苦,都不哭! 度心,心度! 撑住! 血泪巯祝,成模糊! 短处,长处! 交出! 铭记来路...
    浅秋遗梦阅读 540评论 0 0