前端【免费下载链接】30-seconds-of-cssShort CSS code snippets for all your development needs项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-css点击查看免费下载导读本文围绕 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 classtext-overlay-image img srchttps://picsum.photos/id/971/400/400.jpg / figcaption h3Business 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%; }容器承担三个职责定位基准position: relative使后续figcaption的position: absolute能相对它定位而不是相对页面或最近的祖先定位元素尺寸约束max-width: 400px与max-height: 400px限制组件最大为 400×400 的正方形区域width: 100%则让容器在较窄的父级中自适应收缩保证响应式表现盒模型修正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即起始色位于底部、结束色位于顶部正好适合底部文字深色背景、顶部接近透明的视觉需求起始色#000000888 位十六进制颜色写法#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 classtext-overlay-image img srchttps://picsum.photos/id/971/400/400.jpg / figcaption h3Business 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则几乎所有现代浏览器都可用。对比维度本文片段image-text-overlayimage-overlay-hovertext-backdrop-overlay核心手段linear-gradient渐变遮罩伪元素 过渡动画backdrop-filter模糊触发方式静态常驻:hover交互静态常驻文字位置底部Flexbox 控制居中左上角兼容性极高极高依赖较新浏览器应用场景与自定义建议营销/定价卡片原示例的 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。赞分享前端【免费下载链接】30-seconds-of-cssShort CSS code snippets for all your development needs项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-css点击查看免费下载相关推荐fastHan核心功能全解析分词、词性标注、NER与依存分析实战fastHan核心功能全解析分词、词性标注、NER与依存分析实战 欢迎来到fastHan中文NLP工具包的完整指南 fastHan是一个基于BERT的中30-seconds-of-code 实战CSS 伪元素实现图片悬停遮罩效果Image Overlay on Hover30 seconds of code 实战CSS 伪元素实现图片悬停遮罩效果Image Overlay on Hover 悬停遮罩image overl教程文档30-seconds-of-css 实战用纯 CSS 为加载失败的图片broken image实现优雅的错误提示回退30 seconds of css 实战用纯 CSS 为加载失败的图片broken image实现优雅的错误提示回退 导读 网页中图片加载失败404、网前端上一篇ReaLTaiizor控件大全50组件详解与实战应用下一篇COLMAP常见错误解决方案从特征点匹配失败到内存溢出创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考