线性渐变必须用 background 或 background-image 属性在 CSS 中定义，不可用 bgcolor 等 HTML 旧属性；正确写法为 background: linear-gradient(135deg, #6a11cb, #2575fc)，需配合 height: 100vh 或 min-height: 100vh 确保铺满视口，并可添加 background-color 作为不支持渐变时的降级色。
直接用 CSS 的 background 写线性渐变
HTML 本身不处理样式，背景渐变必须写在 CSS 里。最简单的方式是给 <body> 或 <html> 添加内联样式或内部样式表。别试图在 <body bgcolor="..."> 这种老式属性里塞渐变——它只认纯色，会直接忽略。
推荐在 <head> 里加 <style> 块，避免内联样式污染结构：
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}
</style>-
linear-gradient()第一个参数是方向，135deg是从左上到右下，也可用to bottom right - 至少两个颜色停靠点（
0%和100%），中间可加更多，比如#ff9a9e 0%, #fad0c4 100% - 务必设
height: 100vh或min-height: 100vh，否则渐变可能只覆盖内容高度，留白处显默认白底
用 background-image 而不是 background-color
渐变本质是图像，CSS 把它归为 background-image 类型。如果同时写了 background-color 和 background-image，颜色会作为降级后备（fallback），但不会叠加显示。
常见错误是误写成：
立即学习“前端免费学习笔记（深入）”；
body {
background-color: linear-gradient(...); /* ❌ 错！background-color 不接受渐变 */
}正确写法是统一用 background 简写，或明确用 background-image：
body {
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
background-color: #ff7e5f; /* ✅ 降级色，当渐变不支持时显示 */
}- 所有现代浏览器都支持
linear-gradient()，但 IE10+ 需要-ms-linear-gradient()前缀（现在基本可不加） - 如果页面有滚动条，且希望渐变铺满整个视口（包括滚动区域），用
min-height: 100vh比height: 100vh更稳妥
避免被子元素遮挡或透明穿透
渐变设在 body 上，但如果有子容器（比如 <div class="card">）没设背景色，默认是透明的，文字会“浮”在渐变上——这通常没问题；但如果子元素用了半透明背景（如 rgba(255,255,255,0.8)），渐变就会从底下透上来，有时造成阅读困难。
- 检查是否意外设置了
background: transparent或漏写了背景色 - 若需子元素完全遮盖背景，给它加
background-color: white（或其它不透明色） - 不要对
html元素设渐变再对body设白色——这样body会盖住html的渐变，白忙一场
渐变本身很简单，真正容易出问题的是高度控制、层叠顺序和降级逻辑。尤其当页面内容少于一屏时，100vh 和 min-height 的差别会立刻暴露。
