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

yumo6669小时前技术文章2

不用下载任何档案,只要将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)

相关文章

盘点在线代码编辑测试网站(在线编写代码网站)

对于一些前端的样式和js效果,我们非常希望可以将这些代码片段保存起来,然后分享给那些想要使用这些样式特效的人,庆幸的是,网络上已经有很多这样的网站了,今天我们就来盘点一下这些非常好用的网站。jsfid...

把CSS代码“减肥”30%后,灯具独立站加载速度快了2秒

”上个月,帮佛山李总做跨境灯具站时,技术顾问的话让他直挠头——网站刚上线,流量还没起来,就被“速度”卡了脖子。我打开Chrome开发者工具,吓了一跳:一个详情页的CSS文件有1.2MB,JS文件800...

源自codepen的25个最受欢迎的HTML/CSS 代码

Codepen是一个非常了不起的网页应用。只要电脑能够上网,你就可以创建HTML, CSS和Javascript。如果你想选择性加入PRO版本,你会得到一些非常酷的效果诸如:世界范围内的成对编程(在线...

从网站检查中复制CSS代码的最简单方法

在处理网站项目时,您是否曾经对使用开发工具感到沮丧?必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是,有一个浏览器扩展程序可以简化该过程:CSS Sca...

可以看得见的代码运行:编程教学网站

可视化的查看代码运行原理的网站以下是几个常见的可视化查看代码运行原理的网站:Python Tutor(http://www.pythontutor.com):Python Tutor 是一个在线的代码...

短网址见多了,来看看这个长长长长长网址

短网址的由来说起短网址的由来,不得不提到一个平台,那就是微博。微博早期时候,每条微博最多只能写 140 个字,这就导致如果你想在一条微博中写一条网址,那么网址就会占用一大半的内容。于是人们就想,能不能...