RGBA和OPACITY的透明效果有啥不同？

Posted 2023-03-24

参考技术A 1.背景介绍

1.什么是RGBA？

rgb大家都熟悉，RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。

其实他就是来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

我们平时用的较多的是16进制颜色，例如黑色#000000;白色#FFFFFF，这些是16进制表示的颜色，如果使用RGB颜色表示就是 rgb(0, 0, 0)与rgb(255,255,255)，其实本质上是一样的，只是一个是16进制表示的，一个是二进制表示的(RGB颜色)。

用rgba改变大娃字体颜色

用rgba改变大娃边框颜色

用rgba改变大娃字体阴影颜色

用rgba改变大娃边框阴影颜色

其实我是一个dome

透明度还支持透明渐变。这对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个原谅绿到透明的线性渐变。

加了这个渐变属性

2.什么是OPACITY？

也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。

opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

3.什么是DISPLAY：NONE

将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。

4.什么是VISIBLITY

w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

二.知识剖析

1.RGBA与OPACITY的区别

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

三.常见问题

DISPLAY 和VISIBILITY有什么区别?

四.解决方案

1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

2.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

五.编码实战

六.扩展思考

什么是渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

详见dome

7.参考文献

参考一： handongopqwe的专栏

参考二： CSS3 Gradient

参考三： 张云的博客

8.更多讨论

更多讨论：大家有没有其他实现透明或隐藏的方法?

某些情况下可以使用left:-100000px来达到同样效果。

position: relative;效果类似于visibility:hidden;还占着位置，不愿离开。

position: absolute;效果类似于display:none;消失的很远，还不占地方。

opacity ：0 和 visbility :hidden 之间有什么区别

visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

鸣谢

感谢何华飒、王相博师兄，此教程是在他们之前技术分享的基础上完善而成

感谢大家观看

BY : 何华飒| 王相博 | 王姝丽

PPT链接

视频链接

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

我们下周再见！

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请链接：http://www.jnshu.com/login/1/12164783

rgb() 和 rgba() 不透明度有啥区别？

【中文标题】rgb() 和 rgba() 不透明度有啥区别？

【英文标题】：What is the difference between rgb() and rgba() opacity?rgb() 和 rgba() 不透明度有什么区别？

【发布时间】：2021-05-07 06:47:29

【问题描述】：

我在 SO 上发现了另一个关于 rgb 与 rgba 非常相似的问题，但它缺少关于 rgb with opacity 用法的答案。

我知道两者之间的区别——rgba 只是 rgb，但使用 alpha 表示不透明度。问题是，我使用具有不透明度值的 rgb 已经几个月甚至几年了。它一直对我有用。 rgb(255, 0, 255, 0.5)

让我想知道如果两者的工作方式相同，使用一个是否有优势？ rgb 已经存在了更长时间，所以我认为浏览器兼容性更好？一位同事还告诉我 rgba 值仅适用于背景颜色，但话又说回来，我在 codepen 中做了一些测试，它适用于 Edge 和 Chrome。

（我知道两者都是基于 Chrome 的，这两个都是我下载的）

相关问题：What are differences between RGB vs RGBA other than 'opacity'

---

这是我的 sn-p

/* texts */
.one 
  color: rgba(255, 200, 0, .5);

.oneFive 
  color: rgb(255, 200, 0, .5);


/* backgrounds */
.two 
  background-color: rgb(255, 0, 255, 0.5);

.three 
  background-color: rgba(0, 0, 255, 0.5);




/*          */
/* settings */
/*          */
.two, .three 
  height: 50px;

.two 
  margin-top: 30px;

.two, .three, .zero 
  color: white;

.one, .oneFive 
  height: 50px;
  font-weight: bold;
  font-size: 2em;
  padding-left: 40px;
  padding-top: 20px;

body  
  background-color: #444; 
  color: white; 

.zero 
  background-color: darkgreen;
  width: 300px;
  height: 350px;
  position: absolute;
  top: 35px;
  z-index: -1;

dark grey 100% opacity

<div class="zero">dark green 100% opacity</div>

<div class="oneFive">rgb yellow text 70% opacity</div>
<div class="one">rgba yellow text 70% opacity</div>

<div class="two">rgb 50% background opacity</div>
<div class="three">rgba 50% background opacity</div>

【问题讨论】：

我要冒昧地说这是浏览器在翻译 rgb 中设置的不正确值，并带有不透明度值。如果您查看计算选项卡下的浏览器开发工具，您会注意到rgb 的值被计算为rgba。我认为任何支持 CSS3 的浏览器都会“修复”该属性。 另外一位同事告诉我 rgba 值仅适用于背景颜色你的同事错了。

rgb 存在的时间更长，所以我认为浏览器兼容性更好？ 我不会这么说。您永远不会注意到性能下降，但如果您的浏览器不必“修复”传递给 rgb 集合的不正确值，您将减少浏览器的工作量。

developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors

@disinfor 感谢您这么快回答。我确实检查了控制台的 rgb 值。 Chrome似乎不需要修复它。 (screencast.com/t/8essnzkacA)。我看到 rgba 是自 CSS Level 4 以来 rgb 的别名。我猜大多数流行的浏览器都是这样。如果您可以将您的回复捆绑为答案，我会接受它，因为它为我提供了我需要的信息。谢谢！

我认为 RGBA 用于保存添加不透明度的另一个 CSS 属性。如果我们想为任何元素添加不透明的颜色或不透明的背景，rgba 将是最佳选择，因为我们不会编写不透明属性。所以节省了一行代码。

【参考方案1】：

按要求回答：

我会说是浏览器翻译了rgb 中设置的“不正确”值，并带有不透明度值。

如果您查看计算选项卡下的浏览器开发工具，您会注意到 rgb 值被计算为 rgba（至少在 Firefox 中）。

我认为任何支持 CSS3 的浏览器都会“修复”该属性。

另外一位同事告诉我 rgba 值仅适用于背景颜色：你的同事错了。

rgb 存在的时间更长，所以我认为浏览器兼容性更好？ 我不会这么说。您永远不会注意到性能下降，但如果您的浏览器不必“修复”传递给rgb 集的不正确值，您将减少浏览器的工作量。 更新：rgba 是rgb 的别名，所以它真的没有修复任何东西，它只是传递给rgb。

这里有一些关于 rgb 和 rgba 的文档 - 特别是函数的别名：

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors

【参考方案2】：

让我想知道如果两者的工作方式相同，使用一个是否有优势？

这不是关于优势，而是the Specification 中新定义的东西

rgb() 和 rgba()，hsl() 和 hsla() 现在是彼此的别名（它们都有一个可选的 alpha）。 ^ref

和

同样由于遗留原因，还存在一个 rgba() 函数，其语法和行为与 rgb() 相同。 ^ref

所以rgba() 意味着要消失，只应该使用rgb()，但这不会发生，因为它会产生很多问题和冲突，所以rgba() 仍然会被考虑并且只会使用相同的语法如rgb()

另请注意，新语法不再包含逗号：

rgb() = rgb( <percentage>3 [ / <alpha-value> ]? ) |
  rgb( <number>3 [ / <alpha-value> ]? )
<alpha-value> = <number> | <percentage>

例如，您应该编写 rgb(255 65 40) 或 rgb(255 65 40 / 80%)，但由于遗留原因，仍然支持逗号语法：

出于遗留原因，rgb() 还支持另一种语法，该语法用逗号分隔所有参数：