Opacité CSS vs rgba: lequel est le mieux?

Comme d'autres l'ont dit, rgba() et opacity travailler différemment:

• rgba() affecte une propriété unique, comme color, background-color ou border-color, d'un des éléments visés par la CSS et de l' seulement de ces éléments
• opacity affecte toutes les propriétés (la perspective) ciblés sur des éléments le long avec tous leurs arborescence DOM enfants

Encore, de nombreux effets peuvent être obtenus en utilisant l'un de ces et de la performance/compatibilité ne varier si cette question n'est pas inutile.

De mon expérience, en utilisant et en particulier de l'animation de la opacity propriété est le moyen le plus facile pour provoquer le fameux texte de l'anticrénelage glitch dans les navigateurs webkit (surtout Safari, Planant au-dessus de transition CSS dans Safari allège certaine couleur de police). Cela est dû au fait que opacity affecte non pas un mais toute une hiérarchie des éléments et des navigateurs parfois ne parviennent pas à bien distinguer les éléments qui sont redessinées. Aucun de ces problèmes se produisent lors de l'utilisation de rgba().

En outre, de nombreuses versions de l'Opéra, dont la presque courant v12.11, produire de graves problèmes graphiques avec certains scénarios d'utilisation de opacity. Le mélange d'opacité avec du texte, des images de fond et de texte ombres, puis faites défiler la page ou de la div est la façon la plus simple de reproduire le problème. Un problème similaire s'est produit pour moi sur la version iOS de Safari. Encore une fois, aucun de ces problèmes avec rgba().

Ces choses arrivent pour une raison. De la prestation de point de vue, lors de l'utilisation de rgba() pour color/background-color/border-color, nous dire au navigateur explicitement des éléments du DOM et qui graphique couches d'éléments sont affectés. Cela le rend beaucoup plus facile pour les navigateurs à la figure lorsqu'ils ont besoin pour obtenir redessiné. Aussi, se rétrécissant vers le bas de la zone d'effet est une garantie de performances, que j'ai confirmé par essayer les deux options et de s'apercevoir que le site web à l'aide de rgba() en place de opacity ressenti nettement plus lisse, en particulier sur Safari et Opera.

Sûr, des choses comme la décoloration des images ne peut pas être réalisé avec rgba() (mask-image n'étant pas pris en charge assez), mais pour des tâches comme la simple transparence du texte ou de l'arrière-plan, rgba() semble être un meilleur choix. Encore plus si elle est mélangée avec CSS3 animation.

Oh, et n'oubliez pas de toujours inclure une solution de secours lors de l'utilisation de rgba():

.el {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.5);
}

Au premier abord, vous devez savoir que rgb() est cross-browser, mais le choix de la transparence entre rgba() et opacity() dépend de votre cas, si vous avez une division avec l'arborescence DOM enfants et vous ne voulez pas le rendre transparent de ses enfants à mieux choisir rgba() mais si c'est un solitaire de la division, je préfère utiliser opacity().

Parce que les navigateurs utilisent L'Accélération Matérielle pour le rendu opacity().
filter: alfa(opacity=x) est la même que opacity() mais c'est pour IE8 et les versions antérieures.

La rgba() est une fonction qui force les navigateurs pour calculer une couleur, mais de ne pas utiliser l'Accélération graphique, et si vous utilisez rgba() fréquemment dans une page peut-être que votre navigateur fonctionne assez lent. Si vous utilisez une couleur simple, je préfère utiliser code hexadécimal de la couleur, parce que c'est un pré calculé couleur et les navigateurs ne pas calculer et juste de le peindre.

Après tout, si votre cas, vous appellent à l'utilisation rgba() mais vous voulez l'Accélération GPU, vous pouvez utiliser transform: translateZ(0);, rien ne se passe, mais votre navigateur de la force à utiliser le GPU. c'est un truc pour de meilleures performances, mais ne l'utilisez pas fréquemment.

Note: le transparent clé pour la couleur des cartes à rgba(0,0,0,0). c'est juste une clé, pas une valeur exacte.