免费SVG重复背景图产生器，CSS代码复制粘贴快速套用

不用下载任何档案，只要将CSS代码加入网站即可轻松套用漂亮平铺式背景！

如果对于SVG格式有些了解应该知道，SVG就是所谓的以代码画图，也因此不用再下载额外图片档案，只要将产生的代码加到自己网站CSS就能出现背景效果。

站点名称：Hero Patterns

网站连接：http://www.heropatterns.com/

使用教学

STEP 1

开启Hero Patterns网站后，首页会出现许多重复图案的平铺式背景图（目前大约40种），从上方切换不同的前景、背景色及透明度。

STEP 2

Hero Patterns网站收录的图案都很简单，有些还蛮典雅的，适合各种网站使用，尤其是觉得单色背景看起来太过单调时，Hero Patterns或许能带来意想不到的效果。

还有Unique Gradient Generator(http://gradient.quasi.ink/)亦能产生很漂亮的网页毛玻璃模糊背景，如果你觉得平铺式背景看起来不符合网页的设计风格，也能参考这个类似的网站背景产生器。下期介绍这个平台

STEP 3

选择任一背景后，在Selected Pattern页面还能进行前景、背景色和透明度调整，网页会直接让你预览背景图案效果，没问题的话，复制上方产生的CSS代码，将它加入网站CSS代码的适当位置就能快速套用此背景图案，是不是很强大呢？

如果要做小细节的编辑调整，也可以从网站来下载产生的SVG图片，而不是CSS代码，点选右上角「Download unstyled SVG」就能下载图片。对了，这项服务会不断更新而且可以永久免费使用喔！

关注天时，每日分享点知识，更多内容可浏览本人网站（http://www.24s.net)