bg-cover图片未铺满容器的根本原因是容器缺少显式高度，需设置h-64等高度类或解决flex/grid压缩问题；拉伸不裁切应使用bg-[length:100%_100%]或自定义backgroundSize；响应式需结合断点前缀调整bg-*类及background-position；模糊多因原图分辨率不足，建议图片尺寸比容器大20%并优先用.webp格式。
bg-cover 为什么图片还是没铺满容器
常见现象是加了 bg-cover，但背景图边缘仍有留白，或只显示中心一小块。根本原因不是类名写错了，而是容器本身没有明确尺寸——bg-cover 依赖父容器的宽高计算缩放比例，如果容器高度为 auto（比如纯文字内容撑开的 div），浏览器无法确定“铺满”参照谁。
- 确保容器有显式高度，比如
h-64、min-h-screen或aspect-[16/9] - 检查是否被外层
flex/grid容器压缩了高度（例如flex-col下子项未设flex-1） - 避免在
bg-cover同时使用bg-center以外的定位类（如bg-top），否则可能让关键区域被裁掉
想拉伸填充又不裁切，该用 bg-contain 还是自定义 background-size
bg-contain 确保整图可见，但常导致留白；真要“拉伸不裁切”，bg-cover 不适用，得手动覆盖 background-size 值。
- 直接写
bg-[length:100%_100%]强制拉伸（Tailwind v3.2+ 支持） - 旧版 Tailwind 需在
tailwind.config.js的theme.extend.backgroundSize中添加自定义值，再用bg-[100%] - 注意：100%×100% 拉伸会严重失真，仅适合图标、几何图案等对比例不敏感的图
响应式下背景图尺寸错乱，怎么按屏幕断点切换
单靠 bg-cover 无法响应式切换行为，必须配合断点前缀和不同 background-size 值。
- 用
md:bg-contain lg:bg-cover在中屏显示全图、大屏裁切铺满 - 更精细控制可组合
bg-[length:100%_auto]（宽度拉满、高度自适应）和bg-[length:auto_100%]（反之） - 别忘了同步调整
background-position，比如md:bg-center lg:bg-bottom，防止关键内容被裁掉
背景图尺寸生效但模糊，是不是图片分辨率不够
模糊大概率不是代码问题，而是图片物理尺寸太小，被 bg-cover 拉伸放大后像素点变稀疏。Tailwind 不处理图片质量，只控制 CSS 渲染行为。
立即学习“前端免费学习笔记（深入）”；
- 检查原图分辨率：至少要比最大容器尺寸宽高各多出 20%（比如容器 1200×800，图建议 ≥1440×960）
- 避免用
.png存高清摄影图——同等清晰度下.webp体积更小，加载更快，且现代浏览器支持好 - 如果必须小图撑大容器，可用
image-rendering: -webkit-optimize-contrast（加在自定义 class 里）轻微抑制插值模糊，但效果有限
真正难调的是多层叠加时的尺寸优先级：CSS 的 background-size 会覆盖 bg-cover，而内联 style 又会覆盖 class。调的时候先看 computed styles，别只盯 HTML class 列表。
