使用CSS或Canvas生成的背景图像

Question

最近发现这张图片：

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

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

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

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

Answer 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/

Answer 2

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

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

Answer 3

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

background: url(<string_from_toDataURL>)

2）如果此图像有很多重复模式，您可以尝试将其保存为8位PNG。如果你在Windows上irfan view有很好的降低颜色深度的能力。