rgba()和opacity的使用

时间:2021-03-27 00:59:04

rgba()表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数,“可以让制定的颜色透明化”(rgb()上扩展的,其只可以设置颜色,而不能使设置的颜色透明化)

例子:rgba(55,146,179,.5) ;   //rgb值为“55,146,179”,.5使设定的rgb值为50%透明,1为完全不透明,0为完全透明

opacity属性是css3的属性,也可以实现透明效果

例子:opacity:.65;    //1为完全不透明,0为完全透明

rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,

而rgba()只作用于元素的颜色或其背景色

两种都不被IE支持(IE9开始支持)

若要为使浏览器兼顾怎么办,下面举例可以解决这个问题:

background:rgb(55,146,179);     /*for IE*/

background:rgba(55,146,179,.25); /*for browsers that support RGBA*/

rgba()和opacity的使用的更多相关文章

  1. RGBA 与opacity

    RGBA是一种表示颜色的方式,初次看到觉得很奇怪,与RGB的区别是什么?后面查了下,才发现RGBA的好处. RGBA各个字母的含义为: R:红色值,正整数 | 百分数: G:绿色值,正整数 | 百分数 ...

  2. rgba()和opacity之间的区别(面试题)

    rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: ...

  3. rgba 和 opacity 的对比.

    rgba 中 的 a  指的是透明度: 1. rgba 的 设置的 透明度 不会被子级 元素继承;    opacity 设置的透明度会被子级元素继承 . 因此 ,有时候 使用 rgba 会比 opa ...

  4. css中使用rgba和opacity设置透明度的区别

    1.使用rgba设置背景色的透明 效果如下: <body> <div id="box"> 你好啊! </div> </body> b ...

  5. RGBA 和 opacity的区别

    两者都可以设置透明度 区别 RGBA 只影响当前元素 opacity 后代会继承该css 值,暂时还没有办法清除该css 在线演示

  6. RGBA与Opacity

    rgba(r,g,b,a) 都与透明度有关,rgba不会影响文字,opacity则会.

  7. 透明度 rgba 和 opacity 的区别

    rgba: 使用方式:rgba(255, 255, 255, .5) 最后一个参数表示透明度取值范围 0 ~1    只作用于元素的颜色或其背景色. opacity :  使用方式:opacity : ...

  8. rgba和opacity区别

    首先来看rgba: R:红色值.正整数 | 百分数G:绿色值.正整数 | 百分数B:蓝色值.正整数 | 百分数A:Alpha透明度.取值0~1之间. 再看opacity: 后面的取值为从 0.0 (完 ...

  9. 【CSS3】rgba与opacity

    RGBA 语法 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 为什么要用RGBA而不用opacity 因为在项目中需要用到一 ...

随机推荐

  1. SVN更新时,校验和不匹配

    svn检出时出现校验和不匹配. 解决方法: 1. 在另外地方检出,然后找到对应文件所在的.svn/entries文件,用新检出的entries文件覆盖原来发生错误的entries文件. 2. 如果是团 ...

  2. nodejs--实现跨域抓取数据

    最近公司安排给我一个任务,抓取页面数据:http://survey.finance.sina.com.cn/static/20205/20131120.html?pid=20205&dpc=1 ...

  3. 网上搜的一个shell中 中文设置的一个样例;

    from:http://www.cnblogs.com/52linux/archive/2012/03/24/2415082.html SSH Secure Shell Client中文乱码的解决方法 ...

  4. POJ 2948 Martian Mining&lpar;DP&rpar;这是POJ第200道,居然没发现

    题目链接 两种矿石,Y和B,Y只能从从右到左,B是从下到上,每个空格只能是上下或者左右,具体看图.求左端+上端最大值. 很容易发现如果想最优,分界线一定是不下降的,分界线上面全是往上,分界线下面都是往 ...

  5. Be Careful With BuildConfig&period;DEBUG

    Be Careful With BuildConfig.DEBUG http://www.digipom.com/be-careful-with-buildconfig-debug/

  6. MongoDB 删除数据库

    MongoDB 删除数据库 语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 实例 以下 ...

  7. corsproxy

    安装完 node.js运行 npm install -g corsproxy安装完成 corsproxy

  8. 独立博客网站FansUnion&period;cn操作2多年的经验和教训以及未来计划

    今天,我把运营了2年的独立博客站点FansUnion给"归零"了.    2012年6月.我成功搭建了自己的博客站点FansUnion.cn,这是因为自己的不懈努力和时代发展成就的 ...

  9. Scanner类详解

    Scanner类用于获取键盘输入(是一个基于正则表达式的文本扫描器),它可以从文件.字符串.输入流中解析出基本类型值和字符串值.Scanner类提供了多个构造器,不同的构造器可以接收文件.字符串和输入 ...

  10. Eclipse设置自动提示(转)

    一.Eclipse编辑Spring配置文件xml时自动提示类class包名 链接:http://blog.csdn.net/hh775313602/article/details/70176531 第 ...