本文介绍如何通过CSS代码为子比主题的手机左侧菜单添加背景图片。核心是使用 background-image 属性为 .mobile-navbar 设置背景图，配合 background-size: cover 实现图片自适应铺满，并可叠加半透明渐变层提升文字可读性。所有修改均在后台自定义CSS中完成，无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用Zibll子比主题并希望美化手机端菜单的WordPress站长

核心价值：通过简单的CSS代码，为手机左侧菜单增加背景图片，提升移动端视觉体验和品牌调性。

操作前准备

在开始配置之前，需要先确认以下几点：

• 无需修改主题文件：所有效果均通过后台自定义CSS实现，升级主题时效果不会丢失。
• 操作入口：WordPress后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义CSS样式」。
• 准备工作：提前准备好一张背景图片，并获取图片的URL地址（可上传至媒体库后复制链接）。
• 备份建议：在添加任何自定义代码前，建议先备份网站。

完整CSS代码

以下是实现手机左侧菜单背景图片的核心代码，直接复制粘贴即可使用：

明：将代码中的 图片链接 替换为你自己的图片URL即可。

操作步骤

准备背景图片

• 进入WordPress后台 → 「媒体」→「添加」，上传一张背景图片。
• 上传完成后，点击图片，在右侧复制 「文件URL」。
• 将复制的URL保存备用。

图片建议：建议使用宽高比较大的图片（如 1080×1920 或更大），并注意图片色彩与菜单文字颜色的搭配，避免文字看不清。

添加CSS代码

• 进入WordPress后台 → 「Zibll子比主题」→「主题设置」。
• 在左侧菜单找到 「全局&功能」，点击 「自定义代码」 选项卡。
• 找到 「自定义CSS样式」 文本框。
• 将上方完整CSS代码完整复制，粘贴到文本框中。
• 将 url(图片链接) 中的 图片链接 替换为你实际的图片URL。
• 点击页面底部的 「保存设置」 按钮。

刷新前台查看效果

• 使用手机打开网站，或使用浏览器开发者工具切换到手机模式。
• 点击左上角的菜单按钮，展开左侧菜单。
• 查看菜单是否已显示背景图片。

代码解析与自定义

代码部分	说明	可调整值
@media (max-width: 767px)	仅在手机端（屏幕宽度≤767px）生效	可调整断点值
.mobile-navbar.show, .mobile-navbar.left	手机左侧菜单的选择器	—
background-size: cover	图片铺满整个菜单区域	contain（完整显示）
background-position: center center	图片居中显示	top、bottom、left、right
background-image: linear-gradient(...), url(...)	渐变叠加层 + 背景图片	调整渐变颜色和透明度
.mobile-nav-widget .box-body	菜单小工具区域背景	可调整颜色值

调整渐变叠加层

如果菜单文字在背景图上不够清晰，可以调整渐变层的颜色和透明度：

仅显示图片不加渐变

如果不需要渐变叠加层，可以简化为：

功能验证

配置完成后，建议进行以下验证：

验证步骤

• 保存配置：确保已点击「保存设置」按钮。
• 手机预览：使用手机打开网站，点击左上角菜单按钮，查看左侧菜单背景图。
• PC模拟：在电脑浏览器中按 F12 打开开发者工具，切换到手机模式（如 iPhone 12/13 尺寸），查看效果。

排障指引

如效果未生效，请依次检查：

• CSS代码是否完整复制、无遗漏
• 是否将 url(图片链接) 中的 「图片链接」替换为实际图片URL
• 是否粘贴在 「自定义CSS样式」 文本框（而非「自定义JavaScript代码」）
• 是否已点击 「保存设置」 按钮
• 浏览器缓存是否已清除（按 Ctrl+F5 强制刷新）

常见问题

问题	解决方法
背景图片不显示	检查图片URL是否正确；确认URL是否包含完整的 https:// 开头
图片显示不完全	调整 background-size: cover 为 contain，或调整 background-position
菜单文字看不清	添加或调整 linear-gradient 叠加层的颜色和透明度
PC端也显示了背景图	检查 @media (max-width: 767px) 代码是否完整，该限制仅对手机端生效
升级主题后效果丢失	代码保存在主题设置的自定义代码中，升级主题不会丢失
背景图影响菜单操作	检查 cursor: pointer 是否影响点击；如无必要可删除该行