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

Question

在我的其他一个问题中,修复渲染问题的解决方案是使用值rgba(255, 255, 255, 255)而不是transparent.我们测试使用rgba(0, 0, 0, 0),这仍然纠正了问题,这意味着它的定义transparent会导致错误.但是,查看W3C CSS3规范(和MDN参考)可以transparent发现rgba(0, 0, 0, 0)并且 transparent应该相同:

透明

完全透明.此关键字可以视为透明黑色的简写,rgba(0,0,0,0),这是其计算值.

什么给出了什么？为什么两个看似相同的值会产生不同的结果呢？我研究了RGBA 的格式,并寻找类似的问题(无济于事).每一个问题/答案,从提到的转换transparent,以rgba(0,0,0,0)总是在词"应该"或"根据"了.(例如这里).什么是实际差异,为什么它会如此改变输出？

注意:这种情况发生在大多数(如果不是全部)Internet Explorer版本中.我们也知道它出现在某些版本的Firefox中.但是,Chrome和Safari不会显示此行为,导致我们相信存在某种补丁-webkit.

---

为了能够将此作为错误提交,我们需要使用最少量的代码重现问题.所以,从我的另一个问题转移,这里是使用transparentvs 的比较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关键字.

这解释了浏览器显示不同结果的原因.然而,它并没有解释他们的版本transparent实际定义为什么.我查看了旧的CSS1和CSS2 w3c规范,找不到旧的定义.什么transparent意思？

Answer 1

rgba()是一个计算项目颜色和透明度的函数,当你想控制项目的颜色和alpha时,它非常有用,特别是如果你不想完全透明的话.作为一个函数,你告诉浏览器你想要绘制项目的颜色和透明度,这比JS更接近JS.

另一方面,"透明"是一种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),他们仍然使用透明属性的旧方法.

您必须记住的一件事是,没有Web浏览器符合W3C标准100%,这就是为什么必须在大多数新属性中添加制造商的特定扩展(moz- webkit-等)

想想为什么四次写同样的东西是如此荒谬,当使用标准属性解决所有问题时,你自己会回答,因为在IE中使用透明和rgba(0,0,0,0)是不一样的.

Answer 2

我一直在尝试transparent使用Chrome中的价值代码,安装在运行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>

好消息:

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