是一个计算项目的颜色和透明度的函数，当您想要控制项目的颜色和alpha值时，这是非常有用的，尤其是如果你不想完全透明。作为一个函数，你告诉浏览器你想要绘制的项目的颜色和透明度，这是更接近JS比CSS。

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

EDIT
好​​的，你说我在我的回答中有矛盾：

透明

完全透明。此关键字可以被视为
透明黑色的缩写，rgba（0,0,0,0）是其计算值。

好吧，我不矛盾。一件事是W3C标准的规范，另一件事是不同浏览器的开发者对该标准的实现。我不会打破IE的代码来证明我在说什么，因为它有点非法，直接问微软的家伙看看他们的答案。

've告诉你，他们是浏览器，不处理透明和rgba（0，0，0，0）以相同的方式。这是因为透明属性比rgba（0，0，0，0）函数更老了（你喜欢比rgba（）更多），最有可能的是， rgba（r，g，b，a）的有效方法，他们仍然使用具有透明属性的旧方法。

你总是要记住的一件事是没有网络浏览器满足W3C标准100％，这就是为什么在大多数新的属性必须添加制造商的特定扩展（moz- webkit-等） / em>

想想为什么这么荒谬的写同一个东西四次，当一切都将使用标准属性解决，而你自己会回答，因为在IE中使用透明和rgba（0，0，0，0）是不一样的。

In one of my other questions, the solution to fixing a rendering issue was by using the value rgba(255, 255, 255, 255) instead of transparent. We tested using rgba(0, 0, 0, 0) and this still corrected the problem, meaning that it is the definition of transparent that causes the error. However, looking at the W3C CSS3 Specification (and MDN reference) for transparent reveals that rgba(0, 0, 0, 0) and transparent should be equal:

transparent

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

So what gives? Why can two, seemingly, identical values produce different results? I've looked into the formatting of RGBA, and looked for similar questions (to no avail). Every question/answer that mentions the conversion from transparent to rgba(0,0,0,0) always has the words 'should' or 'according' in. (For example here). What is the actual difference, and why does it change the output so much?

N.B: This occurs in most, if not all, versions of Internet Explorer. We also know that it occurs in some versions of Firefox. However Chrome and Safari do not display this behaviour, leading us to believe that there is some sort of patch for this in -webkit.

To be able to submit this as a bug we need to reproduce the problem using the minimal amount of code. So, transferred from my other question, here is a comparison of using transparent vs rgba(0,0,0,0), and what happens when we use both.

Transparent

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

Both

As pointed out by @andyb, there is strange behaviour when using both on separate elements. You would expect only one to wobble, however they both do. As demonstrated:

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

For those who can't test this in Internet Explorer, here is an animated .gif of the problem:

This is with transparent on the left, rgba in the middle, and both on the right.

As pointed out by @Abhitalks I misread the reference, however I will leave the below in the question to show that we've already considered this possibility, or in case something was missed/overlooked.

Thanks to @juan-c-v's answer I decided to attempt to create a test to find the computed value for transparent in each browser, and came up with the following:

$('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>

If you are viewing this in Chrome/Safari, then you will most likely see (comment if you don't) rgba(0,0,0,0). However in IE, you will probably see transparent still. I was reading the MSDN reference and found that:

The transparent keyword is not supported.

Which explains why the browsers display different results. However it doesn't explain anywhere what their version of transparent is actually defined as. I looked through the old CSS1 and CSS2 w3c specs and couldn't find an old definition. What does transparent mean?

rgba() is a function that calculates the color and transparency for an item, it is very useful when you want to control the color and the alpha of an item, especially if you do not want to totally transparent. Being a function, you are telling the browser what color and transparency exact you want to draw the item, this is closer to JS than CSS.

On the other hand, "transparent" is a CSS property that identifies an item will be completely transparent, without making calculations of color and alpha. Being a CSS property and not a function, each browser applies it in a different way, so it would differ much to the method used by the browser to apply this property.

EDIT Ok, you say that i contradict that in my answer:

transparent

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

Well, i dont contradict that. One thing thing is the specification of the W3C standard, and another thing is the implementation of that standard by developers of different browsers. I will not break the code of IE to prove what I'm saying, because it's a bit illegal, directly ask the guys at Microsoft to see their answer.

What I've told you is that they are browsers that do not handle transparent and rgba(0, 0, 0, 0) in the same way. That's because the transparent property is much older than the rgba(0, 0, 0, 0) function (you like that more than rgba ()?), And most likely, while for IE have developed an effective method for rgba (r, g, b, a), they are still using the old method with the transparent property.

One thing you always have to keep in mind is that no web browser meets the W3C standards to 100%, that is why in most of the new property must be added the specific extension of the manufacturer (moz- webkit-, etc)

Think why it is so absurd to write the same thing four times, when everything would be solved using the standard property, and yourself will answer because it is not the same to use transparent and rgba (0, 0, 0, 0) in IE.