背景纹理 CSS 与可访问 fallback

大理论

背景纹理位于内容下方，却会直接影响可读性、性能和授权。健康的前端实现不把图案直接硬编码进页面，而是先定义纹理角色，再把颜色、尺寸、频率、透明度和 fallback 接入 surface token。无论纹理来自 SVG、CSS gradient、生成器还是真实材质图片，正文、控件和状态都必须在纹理消失或降低强度后仍然成立。

小知识点

1. 纹理角色先分为 background depth、brand support、chart redundant encoding、material hint，不要把它当主视觉或交互状态。
2. CSS/SVG 图案优先使用语义变量：--texture-color、--texture-opacity、--texture-size、--surface-bg，避免散落一次性 data URI。
3. 长文案背后需要纯色 surface 或 scrim；最终对比度以合成后的视觉结果为准，而不是只测文字色和底色 token。
4. forced-colors 中背景图和阴影可能被移除，关键边界和状态必须由 border、outline、文字、图标或形状承担。
5. print、reduced-data、低端移动设备和深色模式都需要独立检查：纹理可以降级为纯色表面。
6. 图片纹理必须压缩和裁切；PBR/8K 原图适合 3D 管线，不适合直接作为 Web UI 背景。

设计判断

如果关闭纹理后页面信息仍清楚，而开启纹理后品牌或空间层级更丰富，纹理是健康的；如果用户必须依赖纹理理解状态，或者正文可读性因为图案频率下降，它就是错误层级。

实现建议

先输出纹理 brief：角色、来源、授权、目标 surface、前景内容、颜色 token、opacity、scale、mask、fallback 和 QA 场景。CSS 中把纹理放在局部 utility 或 semantic class 中，提供 background-color fallback，再叠加 SVG/CSS/image；对动画纹理使用 prefers-reduced-motion，对高对比使用 @media (forced-colors: active) 禁用背景图并恢复 border/outline。

反例/风险

把 Hero 背景图案放在正文后面且不加 scrim、把 css-doodle 动画运行在整页首屏、直接引用 8K ambientCG 贴图、在图表中只用 pattern 区分状态、没有记录 SVG 生成器参数导致无法复现。

案例分析

Awwwards 的 Orage case study 描述其首页使用模块化 WebGL grid 和 canvas textures，但也把系统逻辑、菜单、列表视图和项目卡片一起设计，说明动态纹理必须服务导航和作品浏览。MAD case study 则提到背景 shader 与拖拽、blur 的性能冲突，并通过暂停 shader、禁用高成本效果等方式优化。可学习点是：高级纹理和背景动效不是独立装饰，而是需要行为、性能和降级策略共同治理。

来源链接

Awwwards Orage case study: https://www.awwwards.com/case-study-orage.html Awwwards MAD case study: https://www.awwwards.com/case-study-mad-website-an-ode-to-digital-product-design.html MDN forced-colors: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/forced-colors CSS Pattern: https://css-pattern.com/ Hero Patterns: https://heropatterns.com/