背景遮罩需分层控制：伪元素::before实现独立遮罩层，text-shadow强化文字对比，g-*统一响应式间距，position: relative确保层级精准，暗色模式下动态调整遮罩色。
背景遮罩不是加个半透明层就完事——它得和文字可读性、响应式缩放、暗色模式同时兼容，否则小屏字看不清、深色模式下遮罩发灰、悬停时阴影突兀。核心是分层控制：伪元素做遮罩、text-shadow保文字对比、g-*管间距、position: relative锁定位。
卡片背景图+遮罩怎么不被裁切也不拉伸
直接给 .card 加 background-image，小屏一缩，图就偏移或留白。必须显式声明尺寸行为：
-
background-size: cover确保填满且不变形 -
background-position: center防止人脸/主体跑出可视区 - 加
min-height: 200px（或按设计稿设值），避免小屏卡片塌陷导致背景“消失” -
position: relative必须加在.card上，否则::before遮罩无法精准覆盖
遮罩层用 ::before 还是直接 background-color
用 ::before 是唯一靠谱方式。硬塞 background-color: rgba(0,0,0,0.4) 到 .card 会污染整个卡片背景，按钮、边框全变灰；而伪元素能独立控制层级和过渡。
- 写法：
.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; } - 文字容器（如
.card-body）加position: relative; z-index: 2，确保文字压在遮罩上 - 如果支持暗色模式，用
@media (prefers-color-scheme: dark)把遮罩色换成rgba(255,255,255,0.2)
文字在遮罩上还看不清？别只调颜色
纯改字体色在移动端极易失效——字号一缩小，对比度立刻崩。得叠加视觉强化：
- 必加
text-shadow: 1px 1px 2px rgba(0,0,0,0.6)，描边比背景块更轻量、更可控 - 标题用
font-weight: 700，正文加line-height: 1.4防挤在一起 - 避免对
.card-title单独设background，会破坏 Bootstrap 的mb-*间距体系 - 测试时把手机横竖屏切换几次，看文字是否始终居中、不溢出
网格间距用 g-* 而不是 mb-*
混用 mb-3 和 g-3 会导致断点切换时间隙跳变——比如从 md→lg，mb-3 还在生效，g-3 又叠一层，卡片突然拉开一大截。
- 统一用
<div class="row g-3"> 控制所有列间/行间间隙<li> <code>g-3在 Bootstrap 5 中等价于gap: 1rem，响应式下自动继承，无需额外媒体查询 - 卡片内部用
p-3或py-3 px-4控制内边距，和外部g-3解耦 - 如果卡片高度不一致，加
h-100到每个.card，再配d-flex flex-column让按钮贴底
最易被忽略的是遮罩的 z-index 层级和 position: relative 的绑定关系——漏掉任何一个，文字就会沉进背景图里；g-* 看似简单，但一旦和自定义 margin 并存，断点切换时的间隙错位几乎必然发生。
