使用 CSS 或 Canvas 生成背景图像答案

【问题标题】：Generated background image with CSS or Canvas使用 CSS 或 Canvas 生成背景图像
【发布时间】：2012-02-16 05:04:25
【问题描述】：

最近发现这张图片：

图片的原始大小超过 2MB。

我想为我的项目设置类似的背景。

我想知道，是否有可能在没有任何图像但使用新的网络技术（如 CSS3、HTML5 Canvas... 或类似的东西）的情况下生成类似的东西？

如果没有，如何在不触及图像宽度和高度的情况下缩小尺寸？这可能吗？

【问题讨论】：

它是什么格式，有什么尺寸？

标签： html css canvas background

【解决方案1】：

画布完全可以。

见：http://js1k.com/2011-dysentery/demo/955

http://js1k.com/2010-first/demo/171

http://js1k.com/2011-dysentery/demo/993

还有这个粒子系统：http://www.mrspeaker.net/dev/parcycle/

【讨论】：

示例与我的图片无关）））
好吧，我不会说“没什么”。它们不是你的图像，这是真的，但它们应该向你展示如何使用画布和 JS 来创建复杂的形状和图形。这是一个起点。

【解决方案2】：

您可以创建一个 SVG 或画布元素，用您想要的图案填充它，将其大小设置为 width:100%;height:100%;position:absolute; 并将其索引设置为 z-index:-1; 以将其推送到您的内容后面。您无法使用 CSS3 创建图像，因为 CSS3 只能让您插入 url（img 或 data://url）（请参阅 http://www.w3.org/TR/css3-background/#backgrounds）。

要使用画布创建这样的图像，您应该了解画布原语，您可以使用fillRect 获得非常基本的结果。 SVG 也是如此，尽管在上一代浏览器版本中两者都没有得到很好的支持。也许您希望通过服务器创建您的 img 并使用 CSS background:; 属性。

【讨论】：

看来，从向后兼容的角度来说是不可能的。你知道，在不损失质量的情况下从根本上减小图像大小的好方法吗？
如果图像是抽象的并且一遍又一遍地包含相同的图案，您可以尝试 PNG。如果它包含非常少量的不同颜色（少于 255 种），请使用 GIF。否则，请使用质量低于 80% 的 JPEG，在您的网站完全加载后加载 100% 的替代 JPEG 并替换它。
实际上，你可以只用 CSS 来创建复杂漂亮的图案：lea.verou.me/css3patterns 但它们是图案，而不是任何图像。

【解决方案3】：

1) 是的，您可以使用 Canvas 绘制类似的东西（寻找正确程序的问题），甚至可以使用 Canvas.toDataURL() 将其应用为 css 背景

background: url(<string_from_toDataURL>)

2) 如果这张图片有很多重复的图案，您可以尝试将其保存为 8 位 PNG。如果您在 Windows 上，irfan view 具有很好的降低颜色深度的能力。

【讨论】：