Material for MkDocs---添加背景

Material for MkDocs—添加背景

最近为了搞我的文档知识库经过考虑选择了mkdoc，主题选择了Material。后来寻思整个背景图片，个人CSS水平一般，于是找AI代写，经过多次调试，终于整好了。

介绍

  1. 通过媒体查询实现横屏与竖屏状态下显示不同的背景
  2. 层次分明的毛玻璃效果
  3. 任何比例下显示都进行了兼容和优化

要查看效果可以去参考我的知识库

使用方法

  1. 补充CSS代码中的背景图片url(竖屏与横屏)

  2. 将CSS代码保存到你的mkdoc项目中docs文件夹中的任意一个位置。例如把CSS代码放到：docs/styles/bg.css中

  3. 在你的mkdoc项目下的mkdocs.yml中添加如下内容

1
2
extra_css:
  - styles/bg.css   # 这里仅供作示例，请根据实际情况替换位置（无需写docs，默认就是docs下的路径了）

注意事项

  1. 本CSS采用MIT License协议，以下为概览：
  • 允许任何人免费使用、修改、分发
  • 不强制要求署名
  • 不提供任何担保，作者不承担责任
  • 修改后的代码可以闭源

  1. 本CSS优化针对的是Material for MkDocs的6.2.8版本，新或旧版本可能会无效或出现BUG

  2. 本CSS优化针对的是主题中开启导航选项卡，也就是在mkdocs.yml中添加配置：

1
2
3
theme:
  features:
      - navigation.tabs

并且没有再单独设置其他影响布局的配置否则可能会出现任何奇怪的显示背景

  1. 本CSS中对于设置导航栏、页脚，内容栏等按照主题颜色为蓝色，内容背景颜色为白色设置的不透明度，如果您需要修改颜色，请修改相关的rgp值。

  2. 修复桌面端下左侧导航栏问题的相关CSS代码本来是想让桌面端访问时候左侧的导航栏为都白色半透明背景，因为之前设置完后最上方有一个白条，阴差阳错就变成了整体白色列表，别说还挺好看的，所以就保留了。

CSS样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/* ========== 基础背景设置 ========== */
body {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

/* 竖屏设备背景 */
@media (orientation: portrait) {
    body {
        background-image: url(''); //替换你自己的竖屏背景，注意不要删掉引号
    }
}

/* 横屏设备背景 */
@media (orientation: landscape) {
    body {
        background-image: url(''); //替换你自己的横屏背景，注意不要删掉引号
    }
}

/* ========== 半透明效果组件 ========== */
/* 标签栏 */
.md-tabs {
    background-color: rgba(63, 81, 181, 0.85) !important;
    backdrop-filter: blur(5px);
}

/* 页脚 */
.md-footer {
    background-color: rgba(63, 81, 181, 0.85) !important;
    backdrop-filter: blur(5px);
}

/* 对话框 */
.md-dialog {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
}

/* 内容区域 */
.md-content__inner {
    background-color: transparent !important;
}

/* 搜索框 */
.md-search {
    background-color: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* 导航栏 */
.md-header {
    background-color: rgba(63, 81, 181, 0.85) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* 主内容区 */
.md-main {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

/* ========== 修复桌面端下左侧导航栏问题(莫名其妙就修复了，还挺好看的) ========== */

.md-nav--primary .md-nav__title~.md-nav__list {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
}

/* 右侧目录栏标题 - 提高优先级 */
.md-sidebar--secondary .md-nav__title,
.md-sidebar--secondary .md-nav__title::before {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
}

/* 移除原始样式中的背景和阴影 */
.md-nav--secondary .md-nav__title {
    background: transparent !important;
    box-shadow: none !important;
}


/* 确保基础样式也被覆盖 */
.md-nav__title {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
}

 

鸣心/Write
CSS
#CSS
Material for MkDocs---添加背景
https://b.wihi.top/posts/a996b252.html
作者
鸣心
发布于
2025年7月28日
许可协议