bootstrap卡片background-image不显示主因是卡片高度为0，需设min-height或用内容撑开；应配background-size、background-position、background-repeat；文字发虚需加遮罩或text-shadow；响应式错位要用媒体查询换图。
Bootstrap卡片里用background-image不显示？先看容器有没有宽高
直接给.card加background-image却看不到图，大概率是卡片内容为空或内部元素塌陷导致高度为0。Bootstrap的.card默认是display: block，但没内容、没设height、也没触发BFC时，背景就无处可渲染。
- 确保卡片有明确高度：加
height或min-height，比如min-height: 200px - 或者让内容撑开它——哪怕只放一个空
<div></div>也能避免塌陷 - 别依赖
.card-body自动撑高，它的padding不贡献高度，且父级.card可能仍为height: auto
图片拉伸变形？用background-size和background-position控制
默认background-image会平铺，且不缩放适配，容易糊或切掉关键区域。得手动配几个关键属性才像样。
-
background-size: cover—— 等比缩放填满，可能裁剪边缘（适合封面图） -
background-size: contain—— 完整显示全图，留白（适合Logo或图标） -
background-position: center center—— 防止偏移，尤其cover下很重要 - 顺手加上
background-repeat: no-repeat，不然小图会重复铺满
示例：
.card { background-image: url('hero.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 240px; }
文字在背景图上发虚？加遮罩或调整color对比度
纯白字压深色图还行，但图本身明暗不均时，局部文字立刻看不清。CSS里没“自动反色”这种事，得自己干预。
- 最稳的是加半透黑色遮罩：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...) - 或者用伪元素
::before叠一层，更灵活（但需额外写position: relative） - 别只调
font-weight，优先改color和加text-shadow，比如text-shadow: 0 1px 2px rgba(0,0,0,0.6)
响应式下背景图错位？别忘background-attachment和媒体查询
滚动时图跟着动（scroll）还是固定（fixed），效果差异极大；而且小屏图尺寸不同，cover可能切掉人脸。
-
background-attachment: fixed在移动端常失效（Safari/iOS限制），慎用 - 用媒体查询换图：
@media (max-width: 576px) { .card { background-image: url('hero-sm.jpg'); } } - 如果用
object-fit思路，注意它只对<img>有效，对background-image无效——别混用概念
真正麻烦的是：背景图没法像<picture></picture>那样响应式切换源，只能靠JS或服务端判断，或者提前切好几套图手动切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
