Html CSS渐变还是背景图像，哪个性能更好？

我想知道哪一个更有效地使用CPU和RAM

使用图像文件并重复：

background:url(../images/livebg/02a.jpg) repeat-x

或使用CSS webkit背景渐变：

background : -moz-linear-gradient(50% 100% 90deg,rgba(0, 111, 122, 1) 0%,rgba(0, 68, 75, 1) 100%);
background : -webkit-linear-gradient(90deg, rgba(0, 111, 122, 1) 0%, rgba(0, 68, 75, 1) 100%); 
background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(0, 111, 122, 1) ),color-stop(1,rgba(0, 68, 75, 1) ));  
background : -o-linear-gradient(90deg, rgba(0, 111, 122, 1) 0%, rgba(0, 68, 75, 1) 100%);

---

图像大小为1x40像素。

没有实际差异。当前的浏览器引擎都在内部将渐变渲染为图像，然后在实际页面渲染期间使用该图像。调整包含元素的大小时，可能会触发重新渲染，但这可以忽略不计

---

这个问题带有过早微观优化的味道。与更大的网络流量和往返开销相比，页面呈现速度很少相关。因此，使用CSS渐变肯定是一个更好的主意，因为它消除了往返（尽管出于完全相同的原因，您应该将40像素的图像嵌入为数据URL）。

CSS渐变不会使用您的带宽，但会比背景图像更多地使用CPU和ram

另一方面，与渐变相比，背景图像将使用大部分带宽。因此，这是一种权衡

如果可以的话，我建议使用CSS渐变，因为如果你的图像是一大块数据，它可能会阻塞你的应用程序

---

最佳使用方法是使用CSS渐变和使用图像作为不受支持浏览器的后备。

这两种方法都很好。但是使用渐变效果更好，因为加载图像比加载渐变效果需要更多的时间。

我使用的是Jquery UI主题，它使用重复的1像素宽的图像作为背景。一点CSS技巧，并将它们全部更改为渐变，性能改进非常明显

---

不确定更宽的图像性能，但是渐变看起来更清晰、更现代。

不错，但背景图像更受支持browsers@NaeemShaikh只与……有关。是的。但梯度并不遥远。可能IE8将成为支撑的下边缘。“但你们们总是可以使用modernizer和image作为后援。”AngularHarsh。这只是一个建议+从我这里得到1