css - 更高效的 css : background image or background rgba?

Question

哪个更有效:

我正在尝试找出哪种提供半透明背景的方法更有效/更快:

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

或者

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

找不到任何资源。

我知道 background-color 不需要 HTTP 请求，而 background-image 需要更多处理。

---

注意事项:

兼容性是一个大问题，因为我(没有人真的应该)不能放弃对

很多答案/评论都提到 background-color: rgba 更快更高效，但 background-image 更兼容。如果为真(没有看到任何硬测试)那么:除了使用像 Modernizr 这样的库之外，是否有后备解决方案？那可行？即(这不起作用，因为它同时起作用 - 但沿着这些方向寻找东西)

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

Answer 1

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