rgba(0,0,0,0) 和透明有什么区别？

Question

在 one of my other questions 中，解决渲染问题的解决方案是使用值rgba(255, 255, 255, 255) 而不是transparent. 我们使用rgba(0, 0, 0, 0) 进行测试，这仍然纠正了问题，这意味着它是@987654334 的定义@ 导致错误。但是，查看transparent 的W3C CSS3 Specification（和MDN reference）会发现rgba(0, 0, 0, 0) 和transparent 应该相等：

透明

完全透明。这个关键字可以被认为是 透明黑色的简写，rgba(0,0,0,0)，它是计算出来的 价值。

那是什么？为什么两个看似相同的值会产生不同的结果？我查看了 RGBA 的the formatting，并寻找了类似的问题（无济于事）。每个提到从transparent 到rgba(0,0,0,0) 的转换的问题/答案总是包含“应该”或“根据”字样。（例如here）。实际的区别是什么，为什么它会改变输出这么多？

注意：这发生在大多数（如果不是全部）Internet Explorer 版本中。我们也知道它发生在某些版本的 Firefox 中。然而 Chrome 和 Safari 并没有显示这种行为，这让我们相信 -webkit 中有某种补丁。

---

为了能够将此作为错误提交，我们需要使用最少的代码重现问题。所以，从我的另一个问题转移过来，这里是使用 transparent 与 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 中测试的人，这里是问题的动画 .gif：

这是transparent在左边，rgba在中间，两者都在右边。

---

正如@Abhitalks 指出的那样，我误读了参考资料，但我将在问题中留下以下内容，以表明我们已经考虑过这种可能性，或者万一遗漏/忽略了某些事情。

感谢@juan-cv 的回答，我决定尝试创建一个测试来查找每个浏览器中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 是什么意思？

Answer 1

rgba() 是一个计算项目颜色和透明度的函数，当你想控制项目的颜色和透明度时，它非常有用，特别是如果你不想完全透明。作为一个函数，你是在告诉浏览器你想要绘制项目的确切颜色和透明度，这更接近于 JS 而不是 CSS。

另一方面，“透明”是一个 CSS 属性，用于标识项目将完全透明，无需计算颜色和 alpha。作为 CSS 属性而不是函数，每个浏览器都以不同的方式应用它，因此它与浏览器应用此属性所使用的方法有很大不同。

编辑 好的，你说我的回答与此相矛盾：

透明

完全透明。这个关键字可以被认为是 透明黑色，rgba(0,0,0,0)，这是它的计算值。

嗯，我不反对。一件事是 W3C 标准的规范，另一件事是不同浏览器的开发人员对该标准的实现。我不会破解IE的代码来证明我在说什么，因为这有点非法，直接问微软的人看看他们的答案。

我告诉你的是，它们是不以相同方式处理透明和 rgba(0, 0, 0, 0) 的浏览器。那是因为透明属性比 rgba(0, 0, 0, 0) 函数（你比 rgba() 更喜欢那个？），而且很可能，而 IE 已经开发了一个rgba(r,g,b,a)的有效方法，他们仍然使用具有透明属性的旧方法。

您必须始终牢记的一点是，没有网页浏览器 100% 符合 W3C 标准，这就是为什么在大多数新属性中必须添加制造商的特定扩展名的原因(moz- webkit- 等)

想想为什么把同样的东西写四次这么荒谬，当一切都可以使用标准属性解决时，你自己会回答，因为使用透明和rgba(0,0, 0, 0) 在 IE 中。

Answer 2

我一直在尝试使用 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 时出现的抖动问题（因为我无法重现该问题），但理论上应用此“hack”应该始终为您提供最流畅的渲染。看看例如。 this article 了解更多信息。

因此，对于您的演示代码，您将得到以下结果：

@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>

---

小提琴：

https://jsfiddle.net/z2r7ypy7/4/

Answer 3

在我看来，两次使用相同的 id 是不好的，无论你在做什么，它都意味着作为一个标识符。 我也不觉得它们都显示动画很奇怪，因为它们都具有与 css 中的 animation 匹配的相同 ID。

#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 上生成动画。