IMAGE & MEDIA
渐变蒙层图Gradient Overlay Image
图片底部压一层透明→深的渐变，白字放上面永远清晰可读。
效果预览
冰岛 · 极光季
9 月至次年 4 月 · 最佳观测地
适合用在哪
卡片封面文字、Hero 背景图、全屏图上的 CTA、导航压图。
容易踩的坑
- 渐变终点透明度低于 0.6，遇到浅色天空或白墙图片时白字直接看不清。
- 蒙层覆盖整张图而非只压文字区，图片主体被压暗、失去吸引力。
- 蒙层伪元素层级高于链接，导致整张卡片无法点击或文字不可选中。
设计提示词 · Prompt
渐变蒙层图（Gradient Overlay / Scrim）：::after 铺 linear-gradient(180deg, transparent 25-40%, rgba(0,0,0,.75-.9))——上透下深，文字放底部 12-16px 处。文字保护是硬需求：图片上放任何文字都要有 scrim，禁止裸文字压图（对比度不可控）。三向变体：底部（文字在下）、顶部（导航压图）、四周（vignette）。深色 scrim 用纯黑而非品牌色（不脏图）。蒙层透明度按图片实际明度微调——WCAG AA 4.5:1 是底线。
Gradient Overlay / Scrim: An ::after layer with linear-gradient(180deg, transparent 25-40%, rgba(0,0,0,.75-.9)) — transparent on top, dark at the bottom — with text placed 12-16px from the bottom. Text protection is a hard requirement: any text over an image needs a scrim; bare text over images is forbidden (contrast is uncontrollable). Three directional variants: bottom (text below), top (navigation over image), all around (vignette). Use pure black for dark scrims rather than brand color (it doesn't muddy the image). Fine-tune the overlay opacity to the image's actual brightness — WCAG AA 4.5:1 is the baseline.
常见搭配
同一页面里经常和「渐变蒙层图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-imgov">
<div class="d-imgov__txt">
<b>冰岛 · 极光季</b>
<span>9 月至次年 4 月 · 最佳观测地</span>
</div>
</div>