• 前端

导读

本文围绕 30-seconds-of-css 仓库中的 image-text-overlay 片段 展开，系统讲解如何用原生 HTML + CSS 在图片底部叠加半透明渐变遮罩并承载标题文字，从而让图片上的文案在任何背景下都清晰可读。读完本文，你将掌握<figure>/<figcaption>的语义化用法、linear-gradient半透明叠加层的配色技巧、绝对定位与 Flexbox 的配合方式，并能直接复制代码投入卡片、Banner、产品展示页等真实场景。

片段概览：一个纯 CSS 的图片文字叠加方案

该片段的目标非常明确：在不借助任何 JavaScript 和框架的前提下，仅用两段极简的 HTML 与 CSS 实现"图片 + 底部文字叠加"的常见视觉组件。它属于仓库snippets目录下典型的visual（视觉）类片段，全代码不依赖外部库，图片源也可替换为任意 URL 或本地资源，非常适合作为营销卡片、博客封面、商品图注等场景的基础组件。

其核心实现只有两条技术要点：

• 使用<figure>与<figcaption>两个语义化元素，分别承载图片与文字叠加层；
• 使用linear-gradient生成一个从底部深色到顶部半透明的渐变遮罩，保证文字区域的对比度。

第一步：搭建语义化的 HTML 结构

原片段给出的 HTML 非常精简：

<figure class="text-overlay-image"> <img src="https://picsum.photos/id/971/400/400.jpg" /> <figcaption> <h3>Business <br/>Pricing</h3> </figcaption> </figure>

这里选用<figure>而非普通的<div>是有意为之：<figure>是 HTML5 中专门用来包裹"图表、插图、照片等独立内容单元"的语义化容器，而<figcaption>则是它专属的标题/说明元素。浏览器和搜索引擎能通过这两个标签直接识别"这张图配这段文字"的从属关系，无障碍阅读器也会将figcaption内容作为图片的说明朗读出来，这是纯div方案无法提供的可访问性收益。

需要注意的细节：

• <img>上未设置width/height属性，实际尺寸由 CSS 的max-width/max-height约束，图片会按比例缩放；
• 示例中的图片地址是占位图服务picsum.photos，在实际项目中可替换为任意图片路径；
• <h3>内的<br/>用于强制在 "Business" 与 "Pricing" 之间换行，形成两行式标题排版。

第二步：核心 CSS 逐属性拆解

容器.text-overlay-image：定位基准与尺寸约束

.text-overlay-image { box-sizing: border-box; position: relative; margin: 8px; max-width: 400px; max-height: 400px; width: 100%; }

容器承担三个职责：

1. 定位基准：position: relative使后续figcaption的position: absolute能相对它定位，而不是相对页面或最近的祖先定位元素；
2. 尺寸约束：max-width: 400px与max-height: 400px限制组件最大为 400×400 的正方形区域，width: 100%则让容器在较窄的父级中自适应收缩，保证响应式表现；
3. 盒模型修正：box-sizing: border-box让内边距和边框计入宽度计算，避免叠加层撑破容器。该技巧在仓库中单独成篇，详见 box-sizing-reset 片段——它通过* { box-sizing: border-box }配合box-sizing: inherit全局统一盒模型，是本片段能精确对齐尺寸的前提。

叠加层.text-overlay-image figcaption：绝对定位 + 渐变遮罩

这是整个片段的灵魂部分：

.text-overlay-image figcaption { box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%); color: #fff; padding: 16px; font-family: sans-serif; font-weight: 700; line-height: 1.2; font-size: 28px; }

绝对定位铺满容器

top/bottom/left/right四个方向同时设为0，使figcaption完全覆盖图片区域，形成一个"透明面板"。由于它是相对.text-overlay-image定位的，图片怎么缩放，遮罩层都会严丝合缝地跟随。

用linear-gradient制造底部深色渐变

background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%)是叠加效果的关键：

• 方向0deg：在 CSS 渐变语法中，0deg表示渐变方向"从下到上"（指向to top），即起始色位于底部、结束色位于顶部，正好适合"底部文字深色背景、顶部接近透明"的视觉需求；
• 起始色#00000088：8 位十六进制颜色写法，#000000是纯黑，末尾的88是透明度通道（十六进制88≈ 十进制 136 ≈ 53% 不透明度），底部 30% 区域呈现半透明黑色，为白色文字提供足够对比度；
• 结束色#ffffff44：白色、约 27% 不透明度，顶部 100% 处几乎透明，因此图片上半部分仍能完整展现，视觉上只是轻微提亮，不会遮挡主体内容；
• 颜色停靠点：30%和100%分别对应渐变起始色与结束色的位置，中间区域自然过渡，形成柔和的"渐入"效果。

这种"底部压暗、顶部透亮"的渐变设计，是图片上叠加文字最常用的对比度解决方案——它不像纯色遮罩那样完全盖住图片，也不像无遮罩那样让文字难以辨认。

Flexbox 将文字压到底部

display: flex; flex-direction: column; justify-content: flex-end让figcaption内部变成纵向弹性布局，并把子元素（<h3>）沿主轴推到底部，配合padding: 16px留出四周内边距，实现"文字贴在图片下沿"的排版。若想文字居中或置顶，只需把justify-content改为center或flex-start，无需改动其他任何属性——这是本片段最易定制的扩展点之一。

文字样式

color: #fff配合font-weight: 700、font-size: 28px、line-height: 1.2给出高对比度、紧凑的粗体标题观感；font-family: sans-serif使用系统无衬线字体兜底。片段最后还补了一条.text-overlay-image figcaption h3 { margin: 0; }，清除<h3>的默认外边距，避免文字与渐变底边之间出现不可控的间距。

完整可运行代码

将上面两部分组合即得到完整片段（与仓库 image-text-overlay.md 一致）：

<figure class="text-overlay-image"> <img src="https://picsum.photos/id/971/400/400.jpg" /> <figcaption> <h3>Business <br/>Pricing</h3> </figcaption> </figure>

.text-overlay-image { box-sizing: border-box; position: relative; margin: 8px; max-width: 400px; max-height: 400px; width: 100%; } .text-overlay-image figcaption { box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%); color: #fff; padding: 16px; font-family: sans-serif; font-weight: 700; line-height: 1.2; font-size: 28px; } .text-overlay-image figcaption h3 { margin: 0; }

该片段不依赖任何 JavaScript，将以上代码放入任意 HTML 页面即可直接运行；图片地址、标题文字、渐变颜色均可按需替换。若希望图片适配任意比例容器而不是固定正方形，可以去掉max-height并为<img>补充object-fit: cover，仓库中 card-image-cutout 片段 正是借助object-fit: cover实现圆形图片裁切的相似思路。

同主题变体对比：三种叠加实现路径

仓库中与"图片上叠加文字"同属visual主题的片段还有两个，放在一起对比有助于按场景选型：

1. hover 触发的遮罩动画：image-overlay-hover 片段

该片段用::before/::after伪元素制作上下两条遮罩横条，配合opacity、transform: scaleY(2)与transition实现鼠标悬停时"百叶窗展开 + 文字淡入"的效果，文字居中显示。与本文方案的核心差异在于：本片段是常驻静态叠加，image-overlay-hover 是交互触发式叠加，适合画廊、作品集等需要强调 hover 反馈的场景。

2.backdrop-filter毛玻璃方案：text-backdrop-overlay 片段

该片段不依赖渐变，而是对文字本身施加backdrop-filter: blur(14px) brightness(80%)，让文字所在区域的背景图片被高斯模糊并压暗，从而在任何背景上都保持可读。它把文字放在图片的左上角，属于"局部可读性增强"思路；而本文的渐变方案则是"整体底部压暗"，两者视觉效果与浏览器兼容性不同——backdrop-filter需要较新的浏览器支持，linear-gradient则几乎所有现代浏览器都可用。

应用场景与自定义建议

• 营销/定价卡片：原示例的 "Business Pricing" 标题正是典型的产品卡片场景，渐变底部天然适合承载价格、按钮等后续补充内容；
• 博客封面与文章头图：将<h3>换成<h2>并加大字号，即可作为封面标题；
• 深色与浅色图片的适配：若图片本身较亮，可提高黑色通道透明度（如#000000AA）或延长深色区域占比（把30%改为50%），反之亦然；
• 响应式细节：width: 100%+max-width: 400px的组合在小屏幕上自动缩窄，但font-size: 28px是固定值，移动端可配合媒体查询下调字号。

兼容性与注意事项

• 全部特性（figure/figcaption、position: absolute、Flexbox、linear-gradient、8 位十六进制颜色）均属现代浏览器的长期稳定能力，无前缀要求；
• #00000088这类 8 位十六进制颜色自 CSS Color Module Level 4 起被广泛支持，如遇极老环境可改写为rgba(0, 0, 0, 0.53)的等价写法；
• figcaption覆盖了整个图片区域且默认会接收指针事件，若在叠加层上放置可点击元素，需注意事件穿透与层级（z-index）管理；
• 图片加载失败时，figcaption的绝对定位会相对容器塌缩，建议为容器设置明确高度或为<img>设置占位背景，仓库中的 broken-image-fallback 片段 提供了图片失效时的兜底思路。

小结

image-text-overlay是 30-seconds-of-css 仓库中"最短路径实现常见视觉需求"的代表作：语义化标签解决结构与无障碍问题，linear-gradient的透明度通道解决对比度问题，绝对定位 + Flexbox 解决布局问题，全程零 JavaScript。掌握它之后，再配合 image-overlay-hover 的动画变体与 text-backdrop-overlay 的毛玻璃变体，即可覆盖图片上叠加文字的大部分实际场景。如果你希望为仓库贡献新的视觉类片段，可参考 snippet-template.md 的格式要求与 CONTRIBUTING.md 的规范说明，仓库完整片段集合见 README.md。

• 前端