不能直接用id加bootstrap 4内置类实现断点渐变背景，因bg-gradient类无媒体查询且!important规则权重高；正确做法是用id配合媒体查询单独控制background-image，并保留background-color回退。
不能直接用 ID + Bootstrap 4 内置类实现断点渐变背景——bg-gradient 类本身无媒体查询，id 选择器权重也不足以覆盖 Bootstrap 的 !important 规则；必须手动写媒体查询 CSS，并用 id 作为作用域限定器。
为什么 #hero-section.bg-gradient-primary.d-md-block 不生效
Bootstrap 4 的 bg-gradient-primary 是全局生效的静态类，不随断点变化；d-md-block 只控制 display，不是渐变开关。写成 id 加工具类组合，既无法触发响应式行为，也无法提高 CSS 权重去覆盖原生规则。更糟的是：bg-gradient-primary 依赖 background-image，而 Bootstrap 4 的 .bg-* 类普遍带 !important，id 单独用也赢不了。
正确做法：用 id 配合媒体查询写 background-image
目标是“只在 md 及以上启用渐变，小屏回退纯色”，需两步分离控制：
- 基础态（小屏）直接给
#hero-section设background-color，不写background-image - 中屏起用
@media (min-width: 768px)覆盖background-image，且只改这一项，避免清掉已有背景色 - 方向写
135deg或to right，别用left to right（已废弃）或to-r（非标准） - 颜色至少两个，例如
linear-gradient(135deg, #007bff, #28a745)；单色仍是纯色
示例：
#hero-section {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
#hero-section {
background-image: linear-gradient(135deg, #007bff, #28a745);
}
}
如果要用自定义类名配合 id，必须加 !important
Bootstrap 4 的 .bg-light、.bg-primary 等都带 !important，你写的类若没同等权重，会被静默忽略。尤其当 HTML 中同时写了 id 和 class（如 <div id="hero" class="bg-light">），你的渐变规则必须能压过 <code>bg-light。
- 写法示例：
#hero-section.bg-md-gradient { background-image: linear-gradient(to right, #dc3545, #ffc107) !important; } - HTML 中必须按顺序写：
<div id="hero-section" class="bg-md-gradient bg-light">，自定义类在前，保底色类在后<li>不要省略 <code>background-color回退——否则小屏可能透出父容器或变透明 - 移动端 Safari 对
50%, #000这种 color-stop 格式敏感，改用50% #000（空格分隔）更稳
真正容易被忽略的点是子元素遮挡：哪怕 background-image 正确渲染了，.container、.card 或 img 这类带不透明 background-color 的子元素，会完全盖住底层渐变。检查 computed styles 时重点看 background-image 是否为 none，而不是只盯 HTML class。
