给网站添加纹理背景，对于Web前端师来说，从代码上实现并不复杂，但对于不懂设计的Web前端人员来说，有时候是蛮头痛的。为了帮助这样的朋友解决难言之隐，今天w3cplus为大家推荐一些关于Web页面中使用纹理的资源。本文主要分成四部分，第一部分向大家推荐能下载纹理背景图的资源网站；第二部分提供了两个由CSS3代码制作的纹理背景的案例网站；第三部分向大家介绍了12款在线制作纹理背景的工具，第四部分为大家推荐了国外24个使用了纹理做背景的Web站点。希望大家对这些东东感兴趣。

纹理图片资源下载

下面列出的是一些有关于Web纹理资源，可以从下面的网站上直接下载相关的纹理图片，使用在您的Web网站上。

1、Colour Lovers

2、Subtle Patterns

3、DIN Pattern

4、Brusheezy

5、Designmoo

6、WDL, from DevianArt

CSS3纹理

CSS3纹理就很有意思了，最早是由Lea Verou提供的，现在其设计了几十种由CSS3的渐变属性和背景尺寸等CSS3新特性配合制作的Web纹理背景图片。

1、Colour CSS3 Patterns Gallery

2、CSS3 Pie Gradient Patterns

纹理在线制作工具

或许有时候，您会说，满世界找网站素材图片，太费劲了，还不一定能找到，那么下面给大家推荐几款在线制作纹理背景的工具。

1、Patternizer

2、Repper Patterns

3、BG Patterns

4、Pixelknetes Background Dotter

5、BG Maker

6、Tartan Maker

7、Stripe Generator 2.0

8、Stripemania

9、Seamless Lite, by Colourlovers

10、Guilloché Pattern Generator

11、Stripe Backgrounds

12、Patternify

使用纹理做背景的网站案例

前面推荐了一些下载纹理图片的网站、CSS3纯代码制作纹理背景的站点以及在线制作纹理背景工具的网站。接下来为大家推荐几个国个使用纹理背景的网站案例：

1、Pop the Box

2、Hermetik

3、Philip Andrews

4、Tapp3

5、Thrivesolo

6、RGB Ltd.

7、Farrkling

8、The Expressive Web

9、Altima

10、Wakwaw

11、Un Oeil Graphik

12、Pop Chart Lab

13、Humaan

14、Impressive Work

15、Kelli Anderson’s Blog

16、Laura Burciaga

17、Mooscupcakes

18、You Know Who Design

19、Mark Dearman

20、Sarha Longnecker

21、John Jacob

22、Island Creek Oyster Bar

23、Google Ventures

24、Struck

注：上面案例都来自于国外网站，部分网站有可能在国内打不开，并不是网站不存在，而是您需要使用VPN浏览。

本文主要围绕Web网站的纹理背景为话题，为大家推荐了下载纹理背景意资源网站，在这些网站上大家可以下载到各式各样式的纹理背景图案，您可以使用在任何元素中；同时为大家推荐了两款CSS3代码制作的纹理背景，您可以根据这些案例做一定的调整，以达到自己需要的纹理背景，但要注意IE低版本浏览器或部分现代浏览器并不支持。除了这些之外，还为大家推荐了12款在线制作纹理背景的工具，您可以尝试在线制作纹理背景，以达到自己Web站点所需。最后为大家推荐了24个国外使用纹理制作的Web站点案例。希望这些资源对您今后的工作有所帮助。如果您有更好的资源，可以在下成的评论中与我们一起分享。

以前资源来自于Awwwards Team的《Background Pattern Designs And Resources For Websites》。

如需转载，烦请注明出处：http://www.w3cplus.com/source/background-patterns-designs-and-resources-for-websites.html