Question

哪个更有效：

我试图找出提供半透明背景的方法更有效/更快：

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

或者

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

无法找到任何资源。

我了解background-color一个人不需要HTTP请求，而background-image需要更多处理。

说明：

兼容性是一个大问题，因为我（没有人真正应该）不能放弃对＆lt;的支持。 IE8。

很多答案/评论都提到background-color: rgba更快更有效，但background-image更兼容友好。如果是真的（没有看到任何硬性测试）那么：除了使用像Modernizr这样的库之外还有其他方法吗？即（这不起作用，因为它同时做两件事 - 但在这些方面寻找一些东西）

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

Answer 1

肯定第一个会更快。使用图像将使用额外的HTTP请求来获取它，图像的大小也会影响加载时间。使用十六进制颜色值而不是rgb也会更好，因为浏览器最终将rgb转换为十六进制。

Answer 2

我会说第一个更高效，更快。后者是一个更兼容的选项，如果第一个更有效的方法不适用于您希望它使用的浏览器，则应该使用它。