Quelle est la différence entre rgba(0,0,0,0) et transparent?

Question

Dans un de mes autres questions, la solution à la fixation d'un problème de rendu en utilisant la valeur rgba(255, 255, 255, 255) au lieu de transparent. Nous avons testé à l'aide de rgba(0, 0, 0, 0) et ce encore corrigé le problème, en ce sens qu'il est la définition de l' transparent qui provoque l'erreur. Cependant, en regardant le W3C Spécification CSS3 (et MDN référence) transparent révèle que rgba(0, 0, 0, 0) et transparent doit être égale:

transparent

Entièrement transparent. Ce mot clé peut être considéré comme un un raccourci pour le noir transparent, rgba(0,0,0,0), qui est sa calculé de la valeur.

Donc, ce qui donne? Pourquoi deux, apparemment, des valeurs identiques produisent des résultats différents? J'ai regardé dans la mise en forme de LED, et chercha des questions similaires (en vain). Chaque question/réponse qui parle de la conversion de l' transparent de rgba(0,0,0,0) a toujours les mots "doit" ou "selon". (Par exemple ici). Quelle est la réelle différence, et pourquoi faut-il changer la sortie tant?

---

Pour être en mesure de présenter cela comme un bug, nous avons besoin de reproduire le problème avec un minimum de code. Donc, transféré de mon autre question, voici une comparaison de l'utilisation de transparent vs rgba(0,0,0,0), et ce qui se passe lorsque nous utilisons à la fois.

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 id="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 id="spinme"></div>

Les deux

Comme l'a souligné @andyb, il y a un comportement étrange lors de l'utilisation à la fois sur des éléments distincts. Que vous pouvez attendre qu'un jeu, cependant ils ont tous deux faire. Comme l'a démontré:

@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 id="spinme"></div>
<div id="spinme"></div>

Answer 1

valeur alpha se réfère à la transparence, l'opacité se réfère à opaque

.custom{
background: rgb(,0,0,0);
opacity: 0.5 
}

vs

.custom{
background: rgba(0,0,0,.5)
}

Dans les détails, le premier élément de style et de son enfant d'arrière-plan sera flou, tandis que dans rgba alpha permet de transparence pour la déclaration de l'élément.

.opaq{
  background: rgb(0,0,0);
  opacity: .8;
  color: #000000;
}
.trans{
  background: rgba(0,0,0,.8);
  color: #000000;
}

<div class="opaq">
  <h1>Heading</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>


<div class="trans">
  <h1>Heading</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>

Answer 2

rgba(0,0,0,0); et transparent; donne le même résultat lors du rendu de la page html, mais dans certains cas, il est préférable de l'utiliser rgba(r,g,b,a); considérons que nous sommes à l'aide de Sass pour le style on peut utiliser des variables.

Un exemple de Sass extrait de code

$red:0;
$green:0;
$blue:0;
$a:0;
.container {
    background-color: rgba($red,$green,$blue,$a);
}

Le code ci-dessus de rendu de la couleur d'arrière-plan transparent,

Le CSS correspondant sera comme suit

.container {
  background-color: transparent;
}

si nous voulons une autre couleur par exemple: bleu avec la transparence de 0,5, on peut changer les valeurs de la variable, comme indiqué ci-dessous

$red:0;
$green:0;
$blue:255;
$a:0.5;
.container {
    background-color: rgba($red,$green,$blue,$a);
}

Le code ci-dessus, le rendu de couleur bleu avec une opacité de 0,5,

Le CSS correspondant sera comme suit

.container {
  background-color: rgba(0, 0, 255, 0.5);
}

En changeant la valeur des variables, nous pouvons changer la couleur transparente ou de toute autre couleur lorsque nous utilisons rgba(r,g,b,a); donc à l'aide d' rgba(r,g,b,a); , c'est mieux.