我在设计网页时倾向使用单色背景,不过很多时候选择合适的背景图看起来会使网站更有质感,也让视觉上不会过于呆板,那么要去那里找到这些素材呢?之前曾经介绍「Hero Patterns 免费SVG 重复背景图产生器,CSS 程式码复制贴上快速套用」就是相当值得加入书签收藏的背景产生器,透过它能建立出具有重复背景效果的图案,除此之外,Subtle Patterns 和Novapattern 分别提供400 个高品质纹理背景素材和Photoshop 可编辑的图片让使用者免费下载。

本文要再来推荐一款我最近找到的免费资源「Caself」,提供相当多免费纹理背景图片,目测大约有超过 800 种图案!可直接线上预览、测试套用效果,还内建 CDN 链结让使用者在不用下载的情况下快速使用到自己的网站、部落格成为背景图案,完全不会耗费自己的流量。

Caself 使用 Amazon S3 空间托管图片,无论是速度或稳定性都非常优异,当然因为图片不大,采用 CSS 方式重复显示,其实下载图片、上传到自己空间使用也是不错的方式。

网站名称:Caself

网站地址:http://www.caself.me/

使用教学

STEP 1

开启Caself 网站,每一页大约会显示20 种不同的背景图,根据网站说明,这些背景图部分使用CC 授权,也有一部分是采用CC0 授权,当你将游标移动到下载或取得链结前底下会跳出授权资讯。

STEP 2

从上方选单可找到热门背景图(Hot)或从下拉式选单选择你有兴趣的背景类别。

STEP 3

当你将游标移动到图片上,会显示「View」按钮,点击后该背景会自动套用到目前网页,让你直接预览背景效果,不过因为Caself 可以看到背景的范围不大,也受限于其他元素的颜色,可以的话直接点击旁边的「CDN & URL」取得图片网址,套用到自己的网站可能会更准确一点。

STEP 4

要如何将背景图片下载或作为自己网站背景使用呢?只要点击素材左侧的「Download」就能下载原始图片啰!前面有提到 Caself 也提供免费的 CDN 图片分流网址,点击「CDN & URL」可以取得这张图片的开放式链结,使用时请记得注意下方跳出的授权方式。

Caself 也在About 页面提供最简单的CSS 载入背景图案教学,直接附上程式码范例,如果不知道要怎么把Caself 图片设定成背景的开发者可以参考,当然Google 一下也会有不少教学,总之这个网站是个很不错的素材来源,尤其你需要纹理背景时可以来这里搜寻看看。

关注天时,分享价值

更多内容,请到天时网