子元素纯色背景会遮挡父级渐变，需用 rgba() 降低其不透明度（如 background-color: rgba(255,255,255,0.85) !important）；同时须同步调整文字颜色、适配深色模式及响应式断点，确保可访问性与视觉一致性。
子元素纯色背景盖住父级渐变怎么办
子元素（比如 .card、.container、.row）默认带 background-color，会完全遮挡父容器的 background-image 渐变——这不是渐变没生效，而是被“盖住了”。必须主动降级子元素背景，留出透出空间。
- 别用
background: transparent，它可能触发浏览器渲染异常或导致文字对比度崩坏 - 改用
background-color: rgba(255, 255, 255, 0.9)这类带 alpha 的值，既保留可读性，又让父级渐变能透上来 - 如果子元素是
.card，直接加自定义类：class="card bg-transparent"不起作用，因为 Bootstrap 的.card自带!important背景色，得用更高权重覆盖 - 对关键子元素写明确 CSS：
.card { background-color: rgba(255, 255, 255, 0.85) !important; }
为什么 d-md-none 或 bg-gradient-primary d-md-block 解决不了遮挡问题
这类组合只控制显隐或开关状态，不改变子元素自身的背景层叠关系。即使你把父容器设成渐变，只要子元素有不透明背景，它就永远在渐变之上。
-
d-md-none让整个子元素消失 → 渐变露出来了，但内容也没了 -
bg-gradient-primary d-md-block是无效写法：Bootstrap 不识别d-md-block这种断点前缀类（那是 Tailwind 的），实际解析为普通 class，无任何响应式行为 - 真正要动的是子元素的
background-color值，不是父容器的显示逻辑
渐变穿透后文字对比度突然不够怎么调
一旦父级渐变透出来，子元素文字常因颜色冲突变得难读——尤其浅色渐变配默认 text-dark，阳光下几乎不可见。这不是样式 bug，是 WCAG 对比度断裂。
- 必须同步调整文字色：
text-white配深渐变，text-dark配浅渐变；不能只靠继承 - 别依赖
text-body这类语义类，它不随背景动态切换，需显式指定 - 深色模式下，渐变色若没重写，仍按亮色系渲染，此时文字更易失效；加
@media (prefers-color-scheme: dark)单独重置渐变和文字色 - 检查子元素是否用了
color: inherit，某些组件（如.btn）会强制覆盖，得用!important锁定
用媒体查询写渐变时，子元素透明度要不要也响应断点
要。小屏下渐变本身被禁用（靠 @media (max-width: 767.98px) 关掉 background-image），但子元素的 rgba() 透明度若不变，会导致小屏纯色背景看起来发灰或发虚。
- 小屏时子元素建议用不透明背景：
background-color: #fff，大屏再切到rgba(255,255,255,0.9) - 写法示例：
@media (min-width: 768px) { .card { background-color: rgba(255, 255, 255, 0.9) !important; } } - 别在同一个媒体查询里混写父级渐变和子元素透明度——拆开写更可控，避免权重干扰
- 如果子元素用了
bg-light等工具类，它自带!important，你的媒体查询规则必须同样带!important才能覆盖
