rgb()和rgba()的不透明度有什么区别? [英] What is the difference between rgb() and rgba() opacity?

问题描述

我在SO上发现了另一个关于rgb vs rgba的问题，该问题非常相似，但是它缺少关于不透明的rgb用法的答案.

我知道两者之间的区别– rgba只是rgb，但具有不透明度的alpha.事实是，我使用具有不透明度值的rgb已有数月甚至数年.它一直为我工作. rgb(255，0，255，0.5)

让我想知道如果两者都一样使用一个是否有优势?rgb已经存在了很长时间，所以我想浏览器的兼容性会更好吗?同事还告诉我，rgba值仅适用于背景色，但是我再次在codepen中进行了一些测试，并且可以在Edge和Chrome上运行.

(我知道两者都是基于Chrome的，都是我下载的)

相关问题: RGB与除了不透明度"之外的RGBA

---

这是我的摘录

 /*文本*/.一 {颜色:rgba(255，200，0，.5);}.oneFive {颜色:rgb(255，200，0，.5);}/*背景*/.二 {background-color:rgb(255，0，255，0.5);}.三 {background-color:rgba(0，0，255，0.5);}/* *//*设置*//* */.二三 {高度:50px；}.二 {边距顶部:30像素;}.two，.three，.zero {白颜色;}.one，.oneFive {高度:50px；font-weight:粗体;字号:2em；padding-left:40px;padding-top:20像素；}身体 {背景颜色:#444；白颜色;}.零 {背景色:深绿色；宽度:300像素；高度:350像素；位置:绝对；顶部:35px；z索引:-1；}  

 深灰色100％不透明< div class ="zero">深绿色100％不透明</div>< div class ="oneFive"> rgb黄色文字70％不透明度</div>< div class ="one"> rgba黄色文字70％不透明度</div>< div class ="two"> rgb 50％背景不透明度</div>< div class ="three"&r; rgba 50％背景不透明度</div>  

解决方案

根据要求进行回答:

我要大步走出去，说这是浏览器翻译的本质上是不正确"的内容.在 rgb 中设置的不透明度值.

如果您在浏览器的开发工具中查看计算"选项卡下的内容，您会注意到 rgb 值被计算为 rgba (至少在Firefox中是这样)./p>

我认为任何支持CSS3的浏览器都可以修复"财产.

还同事告诉我，rgba值仅适用于背景颜色:您的同事是错误的.

rgb 已经存在了很长时间，所以我认为浏览器的兼容性更好?我不会这么说.您将永远不会注意到性能下降，但是如果不必修复"浏览器，则会减少浏览器的工作量.您的错误值将传递给 rgb 设置.更新: rgba 是 rgb 的别名，因此它实际上不是 fixing 的任何东西，它只是传递给 rgb .

以下是有关 rgb 和 rgba 的一些文档-特别是函数的别名:

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

I found another question on SO about rgb vs rgba that is very similar, but it's missing an answer about the usage of rgb with opacity.

I know the difference between both – rgba is just rgb but with alpha for opacity. The thing is, it has been months or even years that I am using rgb with opacity values. It has always worked for me. rgb(255, 0, 255, 0.5)

Makes me wonder if there's an advantage to use one if both works the same? rgb has been there longer so browser compatibility I suppose is better? Also I was told by a coworker that rgba value will only work for background colors, but then again, I did some tests in codepen and it works on Edge and Chrome.

(I know both are Chrome based both these are the one I have downloaded)

Related question : What are differences between RGB vs RGBA other than 'opacity'

---

Here is my snippet

/* 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>

解决方案

Answer as requested:

I'm going to go out on a limb and say it's the browser translating what is essentially an "incorrect" value set in rgb with an opacity value.

If you look in the browser dev tools under the computed tab, you'll notice that the rgb values are computed to rgba (at least in Firefox).

I'm thinking that any browser that supports CSS3 will "fix" the property.

Also I was told by a coworker that rgba value will only work for background colors: Your coworker is wrong.

rgb has been there longer so browser compatibility I suppose is better? I wouldn't say that. You'll never notice a performance hit, but you'll make your browser do less work if it doesn't have to "fix" your incorrect values being passed to the rgb set. Update: rgba is an alias for rgb, so it's really not fixing anything, it's simply passing to rgb anyway.

Here is some documentation on rgb and rgba - specifically the aliasing of the functions:

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

这篇关于rgb()和rgba()的不透明度有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！