rgba（0,0,0,0）和透明有什么区别？
在我的其他问题之一 ，修复渲染问题的解决scheme是通过使用值rgba(255, 255, 255, 255)而不是transparent. 我们使用rgba(0, 0, 0, 0)进行testing，这仍然纠正了这个问题，这意味着它是导致错误的transparent的定义。 但是，查看transparent的W3C CSS3规范 （和MDN参考 ），发现rgba(0, 0, 0, 0)和transparent应该是相等的：
透明
完全透明。 这个关键字可以被认为是透明黑色的简写，rgba（0,0,0,0），这是它的计算值。
那么给了什么？ 为什么两个看似相同的值会产生不同的结果呢？ 我已经研究了RGBA 的格式 ，并寻找类似的问题（无济于事）。 每个提到从transparent转换到rgba(0,0,0,0)问题/答案总是有“应该”或“依据”in。（例如这里 ）。 实际的区别是什么？为什么它会改变输出？
注意：这在大多数（如果不是全部的话）Internet Explorer版本中都会发生。 我们也知道它发生在Firefox的某些版本中。 但是Chrome和Safari不显示这种行为，导致我们相信在-webkit有这种补丁。
为了能够提交这个错误，我们需要使用最less量的代码重现问题。 所以，从我的另一个问题转移，这里是使用transparent vs rgba(0,0,0,0) ，以及当我们使用两者时会发生什么。
透明
@keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } .spinme{ display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid transparent; transform:rotateZ(0deg); animation: spin infinite 4s; }
<div class="spinme"></div>
RGBA（0,0,0,0）
@keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } .spinme{ display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); transform:rotateZ(0deg); animation: spin infinite 4s; }
<div class="spinme"></div>
都
正如@andyb所指出的那样，当在两个单独的元素上使用它们时，会有奇怪的行为。 你会期望只有一个摇摆，但他们都这样做。 如所示：
@keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } .spinme{ display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); transform:rotateZ(0deg); animation: spin infinite 4s; } .spinme:nth-of-type(2){ outline: 1px solid transparent; }
<div class="spinme"></div> <div class="spinme"></div>
对于那些无法在Internet Explorer中进行testing的人来说，这里是一个animation的.gif的问题：
左边是transparent ，右边是rgba ，右边是rgba 。
正如@Abhitalks所指出的那样，我误解了这个参考，但是我会在下面的问题中表明我们已经考虑过这种可能性，或者万一错过了/忽略了一些东西。
感谢@ juan-cv的回答，我决定尝试创build一个testing，在每个浏览器中查找 transparent的计算值，并提出以下内容：
$('p').text($('p').css("background-color"));
p{background-color:transparent;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p></p>
如果您在Chrome / Safari浏览器中查看此内容，那么您很可能会看到（如果不这样做，请注释） rgba(0,0,0,0) 。 但是在IE中，你可能会看到transparent 。 我正在阅读MSDN的参考资料，发现：
透明关键字不被支持。
这就解释了浏览器显示不同结果的原因。 然而，它并没有解释什么地方transparent的版本实际上被定义为。 我查看了旧的CSS1和CSS2 W3C规范，并找不到旧的定义。 transparent是什么意思？
rgba（）是一个计算项目颜色和透明度的函数，当你想控制一个项目的颜色和alpha时，特别是如果你不想完全透明时，它是非常有用的。 作为一个函数，你告诉浏览器什么颜色和透明度确切你想画的项目，这是比JS更接近于CSS。
另一方面，“透明”是一个CSS属性，标识一个项目将是完全透明的，而不需要计算颜色和alpha。 作为一个CSS属性而不是一个函数，每个浏览器都以不同的方式应用它，所以它与浏览器使用该属性所使用的方法有很大不同。
编辑好吧，你说我反驳，在我的答案：
透明
完全透明。 这个关键字可以被认为是透明黑色的简写，rgba（0,0,0,0），这是它的计算值。
那么，我不反驳这一点。 有一件事是W3C标准的规范，另一件事是不同浏览器的开发者实现该标准。 我不会打破IE的代码来certificate我在说什么，因为这有点违法，直接要求微软的人看到他们的答案。
我告诉你的是，它们是不以相同的方式处理透明和rgba（0，0，0，0）的浏览器。 那是因为透明属性比rgba（0，0，0，0）函数要早得多（你喜欢那个比rgba（）？） ，而最有可能的是，虽然为IE开发了一个有效的方法rgba（r， g，b，a），他们仍然使用具有透明属性的旧方法。
有一点你必须记住的是， 没有一个浏览器符合W3C标准的100％ ，这就是为什么大多数新的财产必须添加制造商的特定扩展（moz-webkit等）
想想为什么四次写同样的东西是非常荒谬的，所有的东西都会用标准属性来解决，而你自己也会回答，因为在IE中使用透明和rgba（0,0,0,0）是不一样的。
我一直在尝试在Chrome浏览器中transparent代码，安装在运行Windows 7操作系统的笔记本电脑上。
我自己也没有任何摆动。 所以我期望这个问题是基于特定浏览器和操作系统决定如何渲染元素的特定浏览器和操作系统。
这个问题可能与您的浏览器是否使用硬件加速有关。 现在，强制浏览器使用硬件加速技术有一个窍门：让浏览器认为3D元素转换正在被应用到元素上。
你可以通过添加以下属性到你的元素：
.fake3Dtransformation { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ }
虽然我不能完全确定这是否能解决使用transparent问题时的摇摆问题（因为我无法再现问题），但理论上应用这种“黑客”总是会给你最平滑的渲染。 退房，例如。 这篇文章的更多信息。
所以对于你的演示代码，你最终会得到这个：
@keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } #spinme{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); animation: spin infinite 4s; } #spinme:nth-of-type(2){ outline: 1px solid transparent; }
<div id="spinme"></div> <div id="spinme"></div>
在我看来，不pipe你在做什么，使用同一个id是不好的，它是一个标识符。 我也不觉得奇怪，他们都显示animation，因为他们都有相同的ID匹配animation在CSS中。
#spinme{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); transform:rotateZ(0deg); } #spinme:nth-of-type(1){ animation: spin infinite 4s; }
如果你这样做，只有一个摇摆，这对我来说是完全有意义的。 也许它没有回答你关于transparent问题的问题，但我不确定这是否真的是问题。
编辑无论我尝试使用哪种颜色， transparent或rgba(0,0,0,0)都可以在Safari上进行animation组合。
