如何移除网站首页图片的caption说明文字且保留图片本身

1. 直接修改站点前端源码 #

• 找到首页对应图片的代码段，通常caption的实现分两种：
  • 用<figcaption>标签包裹说明文字：直接删除整段<figcaption>...</figcaption>代码即可，保留<img>标签完整不改动
  • 用自定义class的div/span展示说明文字：找到对应绑定了caption类名的元素，整段删除就可以
• 示例修改对比：

修改前代码：

<figure class="nav-img-wrapper">
  <img src="/nav-map.png" alt="站点导航图">
  <figcaption>点击对应区域跳转到对应栏目</figcaption>
</figure>

修改后代码：

<figure class="nav-img-wrapper">
  <img src="/nav-map.png" alt="站点导航图">
</figure>

2. CMS建站场景（WordPress、Shopify等无自研代码的站点） #

• 进入后台的首页编辑界面，找到该图片对应的内容模块
• 如果是图片块自带的说明文字输入框：直接清空说明文字的输入框内容，保存设置即可
• 如果是主题自带的caption显示开关：在模块设置里找到「显示图片说明」「显示caption」类的选项，关闭后保存发布即可

3. 无需改动原有代码的临时快速方案 #

• 添加自定义CSS隐藏对应caption元素即可，不会影响图片本身的展示和导航功能，示例代码如下：

/* 把下面的选择器替换成你站点导航图片对应的caption元素的类名/ID */
.nav-img-wrapper figcaption {
  display: none !important;
}

• 操作提示：先按F12唤出浏览器开发者工具，选中页面上的caption说明文字，复制它的元素选择器替换到上述代码中，再把CSS代码加到主题的自定义CSS输入框，或者站点全局CSS文件的末尾即可生效。

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