效率更高的CSS：背景图片还是背景RGBBA？

Question

Which is more efficient:

I'm trying to find out which method of providing a semi transparent background is more efficient/faster:

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

Or

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

Couldn't find any resources.

I understand that the background-color one doesn't require an HTTP request and that the background-image takes more processing.

---

Notes:

Compatibility is a big issue as I (no one really should) can't drop support for < IE8.

A lot of answers/comments are mentioning that the background-color: rgba is faster and more efficient but that background-image is more compatibility friendly. If true (haven't seen any hard tests) then: is there a fallback solution other than using a library like Modernizr that will work? ie (this does not work as it does both at the same time - but looking for something along these lines)

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

Answer 1

Definitely the first one would be faster. Using an image will use an additional HTTP request to fetch it, also the size of the image would affect the loading time. Using hex color values instead of rgb would also be better as the browser ultimately converts rgb to hex.

Answer 2

I would say that the first is more efficient and fast. The latter is a more compatible option and should be used if the first, more efficient method does not work with the browsers you want it to work with.