1. rgba

首先它是一个属性值，语法为rgba（r,g,b,a）
- r为红色值， 正整数 | 百分数
- g为绿色值，正整数 | 百分数
- b为蓝色值，正整数 | 百分数
- a为alpha（透明度），值为0 ~ 1之间的小数， 0.0 （完全透明）到 1.0（完全不透明）
- 上面的正整数为十进制0 ~ 255之间的任意值，百分数为0% ~ 100%之间的任意值

2. opacity

opacity是一个属性，并非是属性值。

使用方法为:opacity:0~1；

俩者之间最大的区别在于：opacity属性的值，可以被其子元素继承。而RGBA后代元素不会继承不透明属性。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>opacity和rgba</title>

     <style>

         .opacity{width:100px;height:100px;background: red;opacity: 0.5}

         .rgba{width:100px;height:100px;background:rgba(255,0,0,0.5);}

     </style>

 </head>

 <body>

     <div class="opacity">

         <p>hello world1</p>

     </div>

     <div class="rgba">

         <p>hello world2</p>

     </div>

 </body>

 </html>

输出结果：不难看出，rgba的p元素文本内容没有被设置为透明

当我们需要制作透明的边框时 ，就使用ragb颜色，当我们需要背景图片透明时，需要使用alpha属性，当然，背景图片上的内容的透明度也会随之改变。

深入了解opacity和rgba的更多相关文章

  1. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  2. 雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...

  3. opacity与RGBA透明的区别

    为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度 ...

  4. opacity与rgba

    background: rgba(255,255,255,0.6);容器本身透明度变化,它包含的子容器的透明度不变. opacity:0.6;容器及容器包含的子容器的透明度都会发生变化.

  5. 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 有关opacity或RGBA设置颜色值及元素的透明值

    opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化   opacity声明来 ...

  7. opacity 与rgba区别

    rgba(r,g,b,a) rgba(r,g,b,a) r,g,b分别是颜色r g b的值(0-255),a表示透明度(0-1). opacity: value: opacity: value; va ...

  8. ie6-ie8不支持opacity，rgba解决方法

    半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...

  9. 制作透明色：《CSS3 RGBA》与Opacity样式用法

    前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...

随机推荐

  1. 数据库常用SQL语句（二）：多表连接查询

    前面主要介绍了单表操作时的相关查询语句,接下来介绍一下多表之间的关系,这里主要是多表数据记录的查询,也就是如何在一个查询语句中显示多张表的数据,这也叫多表数据记录的连接查询. 在实现连接查询时,首先是 ...

  2. text2pcap: 将hex转储文本转换为Wireshark可打开的pcap文件

    简介 Text2pcap是一个读取ASCII hex转储的程序,它将描述的数据写入pcap或pcapng文件.text2pcap可以读取包含多个数据包的hexdumps,并构建多个数据包的捕获文件.t ...

  3. 每天学会一点点(重写equals一定要重写hashcode)

    package com.example.demo.javaError; import java.util.HashMap; /** * Created by yyy on 2019/01/24. */ ...

  4. 搭建Nuget服务器（Nuget私服）

    一.前言 对公司或者对个人来说,经过一段时间的沉淀之后,都会有一些框架或者模块,为了对这些框架或者模块进行更好的管理和维护,也为了方便后面的开发或者其他同事,我们可以在我们本地或者内网搭建一个Nuge ...

  5. 致初学者（二）： HDU 2014~ 2032题解

    下面继续给出HDU 2014~2032的AC程序,供大家参考.2014~2032这19道题就被归结为“C语言程序设计练习(三) ”~“C语言程序设计练习(五) ”. HDU 2014:青年歌手大奖赛_ ...

  6. Centos7 C++ 安装使用googletest单元测试

    废话不多说,直接开始吧. 环境说明 系统环境:centos7.0 g++ 版本: g++ (GCC) 4.8.5 20150623 (Red Hat 4.8.5-36) 查看方法: g++ -vers ...

  7. Spring Security Oauth2 自定义 OAuth2 Exception

    付出就要得到回报,这种想法是错的. 前言 在使用Spring Security Oauth2登录和鉴权失败时,默认返回的异常信息如下 { "error": "unauth ...

  8. javascript实现二叉搜索树

    在使用javascript实现基本的数据结构中,练习了好几周,对基本的数据结构如 栈.队列.链表.集合.哈希表.树.图等内容进行了总结并且写了笔记和代码. 在 github中可以看到  点击查看,可以 ...

  9. python自增自减？赋值语句返回值？逗号表达式？

    咳咳,直接进入正题吧. 自增自减(++/--),以及赋值语句,还有逗号表达式都是在C/C++中常见的运算符或表达式. 熟悉C/C++的小伙伴们都知道,在C/C++中: 自增自减(前缀/后缀)运算符将实 ...

  10. Linux 笔记 - 第二十章 配置 Nginx 反向代理和负载均衡

    一.简介 由于 Nginx 的反向代理和负载均衡功能经常被提及,所以将这两个功能单独提出来进行讲解. Nginx 其实仅仅是作为 Nginx Proxy 反向代理使用的,因为这个反向代理功能表现的效果 ...