深入了解opacity和rgba
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的更多相关文章
- css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...
- 雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba
一.background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src url href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...
- opacity与RGBA透明的区别
为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度 ...
- opacity与rgba
background: rgba(255,255,255,0.6);容器本身透明度变化,它包含的子容器的透明度不变. opacity:0.6;容器及容器包含的子容器的透明度都会发生变化.
- 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 有关opacity或RGBA设置颜色值及元素的透明值
opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化 opacity声明来 ...
- 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 ...
- ie6-ie8不支持opacity，rgba解决方法
半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...
- 制作透明色：《CSS3 RGBA》与Opacity样式用法
前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...
随机推荐
- 014 Python基本图形绘制小结
目录 一.Python基本语法元素 1.1 温度转换 二.Python基本图形绘制 2.1 Python蟒蛇绘制 一.Python基本语法元素 缩进.注释.命名.变量.保留字 数据类型.字符串. 整数 ...
- 粗糙版ORM（附详细注释）
目录 ORM 其他 ORM代码 数据库表代码 mysql代码 db/models.py db/pymysql_opreator.py ORM 作为数据库表记录 和 python中对象的映射关系中间件 ...
- xshell使用小技巧
1. 方便复制:Tool --> options --> right buttion(paste the clipboard contents) and copy selected te ...
- CoDeSys
CoDeSys是全球最著名的PLC内核软件研发厂家德国的3S(SMART,SOFTWARE,SOLUTIONS)公司出的一款与制造商无关的IEC 61131-1编程软件.CoDeSys 支持完整版本的 ...
- 实战spring自定义属性(schema)
关于spring自定义属性(schema) 在开发Dubbo应用的时候,我们会在xml中做以下类似的配置: <dubbo:application name="dubbo_service ...
- Go微服务全链路跟踪详解
在微服务架构中,调用链是漫长而复杂的,要了解其中的每个环节及其性能,你需要全链路跟踪. 它的原理很简单,你可以在每个请求开始时生成一个唯一的ID,并将其传递到整个调用链. 该ID称为Correlati ...
- Spring Boot 多站点利用 Redis 实现 Session 共享
如何在不同站点(web服务进程)之间共享会话 Session 呢,原理很简单,就是把这个 Session 独立存储在一个地方,所有的站点都从这个地方读取 Session. 通常我们使用 Redis 来 ...
- C# 缓存的实现
缓存的实现 我们不是做第三方比如Redis等的缓存实现,而是根据实际情况,基于C#上做一些环境变量的保存,方便项目使用. 1.系统全局变量 很多时候,在系统运行开始,需要对系统的运行参数进行保存,以便 ...
- Spring 梳理-接收请求的输入（原）
Spring MVC 允许一下方式将客户端的数据传送到控制器的处理方法中 查询参数(Query Parameter) 表单参数(Form Parameter) 路径变量(Path Variable ...
- FILETIME类型到LARGE_INTEGER类型的转换
核心编程第5版 245页到247页的讲到SetWaitableTimer函数的使用 其中提到 FILETIME类型到LARGE_INTEGER类型的转换问题,如下代码 //我们声明的局部变量 HAND ...