Html 使用CSS或画布生成背景图像

最近发现此图像：

图像的原始大小超过2MB

我想把我的项目背景设置成这样

我想知道，如果没有任何图像，但使用像CSS3、HTML5画布这样的新网络技术，是否有可能生成这样的东西。。。或者类似的

---

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

帆布绝对可能

见：

---

还有一个粒子系统：

您可以创建一个SVG或画布元素，用所需的图案填充它，将其大小设置为

宽度：100%；身高：100%；位置：绝对位置

及其索引到

z-index:-1

将其推到内容后面。您不能使用CSS3创建图像，因为CSS3只允许您插入url（img或

data://

url）（请参阅）

要使用canvas创建这样的图像，您应该了解canvas原语，您可以使用

fillRect

获得非常基本的结果。SVG也是如此，尽管在上一代浏览器版本中，这两个版本都没有得到很好的支持。也许您希望通过服务器创建您的

img

，并使用CSS

background:属性。
1）是的，您可以使用Canvas绘制类似的内容（找到正确的过程），甚至可以使用Canvas.toDataURL（）将其应用为css背景

background:url（）

2） 如果此图像有大量重复图案，可以尝试将其保存为8位PNG。如果您使用的是windows
irfan view
可以很好地降低颜色深度。
它是什么格式，大小是多少？示例与我的图像无关。）好吧，我不会说“什么都没有”。确实，它们不是您的图像，但它们应该向您展示如何使用canvas和JS创建复杂的形状和图形。这是一个起点，从向后兼容的角度来看，这似乎是不可能的。你知道吗，在不损失质量的情况下从根本上减少图像大小的好方法？如果图像是抽象的，并且反复包含相同的图案，你可以尝试PNG。如果它包含非常少量的不同颜色（小于255），请使用GIF。否则，请使用质量低于80%的JPEG，在网站完全加载后，以100%加载另一个JPEG，并将其替换。实际上，您可以使用CSS创建复杂美丽的图案：但它们是图案，而不仅仅是任何图像。