Transparent Textures
transparenttextures.com又名 Transparent Textures
由 Mike Hearn 维护的透明纹理素材站,图案按布料、噪点、砖墙等质感分类,选好颜色和图案后可一键复制 CSS 或下载 PNG,适合前端与 UI 设计师给页面、卡片加一层不抢内容的底纹。
内容网页英文

Transparent Textures 是一个收集透明纹理图案的网站,主要给网页和界面设计做背景用。它站在 Subtle Patterns 的肩膀上,由 @mikehearn 搭建和维护,图案大多由不同设计师投稿,每个图案下面都标了作者名。
怎么用
页面顶部把流程拆成三步:先选一个颜色,再挑一个图案,最后取 CSS。选好之后右侧会显示当前图案,点「Copy to clipboard」就能把带背景色的 CSS 规则复制走,粘到自己的样式表里即可。每个图案卡片上还有 Download 和 Create Wallpaper 两个入口,前者直接给出 PNG 文件,后者把图案铺成一张壁纸。
图案与作者
图案按字母顺序排列,从 3Px Tile、45 Degree Fabric 一直到后面还有大量条目,涵盖布料、纸张、砖墙、混凝土、碳纤维、几何网格、噪点等类型。部分图案带 featured 以及 fabric、noise、wall、geometric 之类的标签,方便按质感筛选。作者署名保留在每张卡片上,例如 Atle Mo、Carlos Valdez、Benjamin Ward 等。
适合谁
前端和 UI 设计师需要给页面、卡片或壁纸加一层不抢内容的底纹时,来这里找现成图案比自己画省事。图案本身是透明 PNG,叠在任意背景色上都能用,这也是它和普通纹理素材站的主要区别。
常见问题
Transparent Textures 有哪些平台 / App?
支持 网页。
Transparent Textures 的替代品有哪些?
本站整理了 3 个替代品,例如 Hero Patterns、Architextures、Resource Boy。
替代品 全部 3 个 →
H
Hero Patterns
由 Steve Schoger 维护的免费 SVG 背景图案库,图案可无缝平铺,能实时调整前景色、背景色和透明度并生成 CSS 规则,适合前端开发者给卡片或整页铺一层不抢内容的纹理背景。同为可调色无缝背景图案库,直接生成 CSS,换过来日常够用
Architextures
面向建筑师与室内设计师的材质纹理库,可按石材、砖、木材等分类浏览并在线调整排布、比例与砖缝,免费下载 PNG,也能通过 SketchUp、Rhino、Revit 插件直接调用,适合做效果图时给墙面和地面找一张比例对得上的贴图。替代砖墙、石材等材质纹理这一块:可调比例砖缝,但偏建筑材质、无 CSS 复制
Resource Boy
国外的免费平面设计素材站,汇集字体、样机、纹理、文字特效和笔刷等可编辑源文件,样机覆盖 T 恤、名片到 iPhone、MacBook,适合做电商详情页的设计师快速出一张产品效果图或标题字。替代纹理素材这一块:提供可编辑纹理源文件,但没有在线调色和 CSS 生成