使用背景图像或 CSS3 渐变更好吗？ （电话间隙）

Posted 2023-02-26

【中文标题】使用背景图像或 CSS3 渐变更好吗？ （电话间隙）

【英文标题】：Is it better to use background images or CSS3 gradient? (Phonegap)

【发布时间】：2012-08-23 14:00:11

【问题描述】：

假设我正在使用一个 DIV 元素，我可以为其添加背景图像或复制相同的样式来创建 CSS3 渐变。现在，对于 Phonegap 应用程序（所有图像文件都驻留在设备本身中），哪个选项更好。

我问这个是因为我在某处看到渐变需要一些计算时间，而使用图像可能会产生加载时间问题。但对于 Phonegap 应用程序，可能不存在图像加载时间问题。那么，也许在这里只使用图像是一个更好的选择？

【参考方案1】：

根据 Webkit Wiki 上的一篇文章，图像表现更好：

有时使用 webkit 的绘图功能（如 -webkit-gradient）是很诱人的，但实际上并不需要 - 维护图像和处理 Photoshop 和绘图工具可能会很麻烦。但是，将 CSS 用于这些任务会将麻烦从设计者的计算机转移到目标的 CPU。 CSS 中的渐变、阴影和其他装饰应仅在必要时使用（例如，当形状根据内容动态时） - 否则，静态图像总是更快。在非常低端的平台上，如果可能的话，甚至建议对某些文本使用静态图像。

来源：https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

当然，您必须平衡 CPU 时间和从服务器加载图像所需的额外时间。此外，对于 Internet Explorer，过滤器非常慢，尤其是如果您在一页上有很多过滤器。

【讨论】：

感谢您的回答。我认为对于基于 Phonegap 的移动应用程序，图像应该比渐变效果更好。