如何为Docusaurus首页设置全屏渐变背景？

方法1：自定义CSS文件实现 #

1. 找到项目里的src/css/custom.css文件（没有的话直接新建），添加针对首页的渐变样式：

   /* 给首页根容器设置全屏渐变背景 */
   .homepage {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
   }
   
   /* 去掉首页内容容器的默认白色背景，让渐变透出来 */
   .homepage .container .row {
     background: transparent;
   }
   

   替换渐变颜色值为你需要的配色即可。

2. 如果你的首页是自定义React组件，直接在组件根元素上写内联样式：

   import React from 'react';
   import Layout from '@theme/Layout';
   
   export default function Home() {
     return (
       <Layout>
         <div style={{
           background: 'linear-gradient(45deg, #87CEEB 0%, #98FB98 100%)',
           minHeight: 'calc(100vh - var(--ifm-navbar-height) - var(--ifm-footer-height))',
           width: '100%',
           padding: 'var(--ifm-spacing-horizontal)'
         }}>
           {/* 首页内容 */}
         </div>
       </Layout>
     );
   }
   

方法2：覆盖主题全局样式（可选） #

如果希望全局背景用渐变，但首页单独调整，可在custom.css里修改根变量：

:root {
  --ifm-background-color: transparent;
}

body {
  background: linear-gradient(180deg, #e0f7fa 0%, #b2ebf2 100%);
}

这种方式需要额外处理导航栏、页脚的背景（你已经能修改这两部分，直接保持它们的自定义颜色即可）。

关键注意点 #

• 确保选择器优先级足够，比如叠加.homepage类避免被默认样式覆盖
• 如果首页有嵌套的白色背景容器，一定要将其background设为transparent
• 调整渐变的角度、颜色节点来匹配目标效果

内容的提问来源于stack exchange，提问作者nashi