Css plus efficace: image de fond ou rgba de fond? - css, css3

Ce qui est plus efficace:

J'essaie de savoir quelle méthode pour fournir un fond semi-transparent est plus efficace / plus rapide:

background-color: rgba(255, 255, 255, .12);

Ou

background-image: url("/path/to/semi-transparent/pixel.png");

Impossible de trouver des ressources.

Je comprends que le background-color on n'a pas besoin d'une requête HTTP et que le background-image prend plus de traitement.

Remarques:

La compatibilité est un gros problème car je (personne ne devrait le faire) ne peux pas "abandonner le support de <IE8.

Beaucoup de réponses / commentaires mentionnent que le background-color: rgba est plus rapide et plus efficace mais que background-image est plus compatible avec la compatibilité. Si true (n’a vu aucun test difficile), alors: existe-t-il une solution de secours autre que l’utilisation d’une librairie comme Moderniser Ça marchera? c'est-à-dire (cela ne fonctionne pas comme les deux à la fois - mais chercher quelque chose dans ce sens)

background: rgba(255, 255, 255, .12) url("/path/to/semi-transparent/pixel.png");

Réponses:

Certainement le premier serait plus rapide. L'utilisation d'une image utilisera une requête HTTP supplémentaire pour la récupérer. De plus, la taille de l'image affectera le temps de chargement. L'utilisation de valeurs de couleur hexadécimales au lieu de rgb serait également préférable, car le navigateur convertit finalement rgb en hexa.

Je dirais que le premier est plus efficace etvite. Ce dernier est une option plus compatible et doit être utilisé si la première méthode, plus efficace, ne fonctionne pas avec les navigateurs avec lesquels vous souhaitez qu'elle fonctionne.