TYPOGRAPHY
图片填充文字Text Mask Image
把一张照片/渐变图填进文字轮廓里，字即画、画即字。
效果预览
NOVA
一张流体渐变图填进超粗的字形里
适合用在哪
品牌大字、年度报告封面、活动主题字、作品集标题。
容易踩的坑
- 填充图片超过 500KB 只为显示几个字，首屏 LCP 被这张背景图拖慢。
- 图片暗部落在文字笔画上时与深色背景融成一片，局部字形看不清。
- 文字透明后被选中复制、翻译插件改写时会变成不可见的空白区域。
设计提示词 · Prompt
图片填充文字（Text Mask Image）：background 用一张高对比图片（山景、城市、流体渐变），background-size:cover + background-clip:text + 文字透明。字体必须超粗（800+）——细笔画会让图片碎成噪点。字号越大效果越好（120px+）。图片选有明暗节奏的（渐变天空、光斑、海洋），纯色图填进去没有信息量。加 fallback：图片加载失败时退回渐变色。这个技巧在文字上叠加 mix-blend-mode 或动画 background-position 还能做出流动的图字。
Text Mask Image: set background to a high-contrast image (mountains, cityscape, fluid gradient), background-size:cover + background-clip:text + transparent text. The font must be extra bold (800+) — thin strokes break the image into noise. The larger the size, the better (120px+). Choose images with a rhythm of light and dark (gradient sky, bokeh, ocean); a flat-color image filled in carries no information. Add a fallback: revert to a gradient color if the image fails to load. Layering mix-blend-mode or animating background-position on the text with this technique can also create flowing image text.
常见搭配
同一页面里经常和「图片填充文字」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-textmask"> <span class="d-textmask__t">NOVA</span> <span class="d-textmask__cap">一张流体渐变图填进超粗的字形里</span> </div>