本文介绍如何通过CSS代码为子比主题文章中的文字添加模糊隐藏效果。核心是使用 filter: blur() 属性让文字默认模糊，配合 :hover 伪类在鼠标悬停时让文字恢复清晰，实现“密文”交互效果。所有修改均在后台自定义CSS中完成，无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用Zibll子比主题并希望为文章内容增加模糊隐藏交互效果的WordPress站长

核心价值：通过极简的CSS代码和自定义HTML标签，在文章中轻松实现文字的模糊隐藏与悬停显示效果，提升内容互动性和趣味性。

操作前准备

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

• 无需修改主题文件：所有效果均通过后台自定义CSS实现，升级主题时效果不会丢失。
• 操作入口：
  • CSS代码：WordPress后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义CSS样式」
  • 文章内容：在古腾堡编辑器中切换到“自定义HTML”块，或使用经典编辑器直接输入HTML代码
• 核心CSS属性：
  • filter: blur()：对文字进行高斯模糊处理
  • transition：让模糊到清晰的过程平滑过渡
  • :hover：鼠标悬停时触发清晰效果
• 备份建议：在添加任何自定义代码前，建议先备份网站。

实现原理

文字模糊隐藏效果的实现原理非常简单：

状态	触发条件	效果
默认状态	页面加载完成	文字处于模糊状态，内容不可辨认
悬停状态	鼠标移动到文字上	文字变为清晰，内容可读
离开状态	鼠标移出文字区域	文字恢复模糊

整个过程通过CSS的 :hover 伪类控制，配合 transition 实现平滑过渡，形成类似“密文刮开”的交互体验。

完整CSS代码

以下是实现文字模糊隐藏效果的核心代码，直接复制粘贴即可使用。

方案一：标准模糊隐藏效果（推荐）

渡漳网提供海量免费游戏资源、PPT模板、办公文档、自学教程、系统源码、绿色软件、设计素材等纯净安全资源。所有文件人工审核，无捆绑无广告，支持积分兑换与创作者收益分成，每日更新。

说明：代码中的 wponss 是自定义标签名，你可以根据自己的喜好修改（如改为 secret、mima 等），但CSS中的标签名必须与文章中的标签名保持一致。

方案二：带提示文字的模糊效果

渡漳网提供海量免费游戏资源、PPT模板、办公文档、自学教程、系统源码、绿色软件、设计素材等纯净安全资源。所有文件人工审核，无捆绑无广告，支持积分兑换与创作者收益分成，每日更新。

在模糊文字旁增加“悬停查看”提示，提升用户体验：

方案三：点击后永久清晰（适合提取码）

渡漳网提供海量免费游戏资源、PPT模板、办公文档、自学教程、系统源码、绿色软件、设计素材等纯净安全资源。所有文件人工审核，无捆绑无广告，支持积分兑换与创作者收益分成，每日更新。

如果需要用户点击后才永久显示清晰内容，可以结合少量JavaScript实现：

配合JavaScript（放在自定义底部HTML代码中）：

操作步骤

第一步：添加CSS代码

• 登录WordPress后台。
• 进入 「Zibll子比主题」→「主题设置」。
• 在左侧菜单找到 「全局&功能」，点击 「自定义代码」 选项卡。
• 找到 「自定义CSS样式」 文本框。
• 从上方方案中，选择一款你喜欢的样式，完整复制对应的CSS代码。
• 粘贴到 「自定义CSS样式」 文本框中。
• 点击页面底部的 「保存设置」 按钮。

第二步：在文章中添加密文

在撰写文章时，使用自定义标签包裹需要模糊隐藏的文字：

古腾堡编辑器：

• 添加一个 「自定义HTML」 块。
• 输入以下代码：

<wponss>这里是需要模糊隐藏的密文内容</wponss>

经典编辑器：

• 直接在文本模式下输入上述HTML代码。

<p>资源提取码：<wponss>a1b2c3d4</wponss>（鼠标悬停查看）</p>

第三步：刷新前台查看效果

• 发布或更新文章。
• 打开文章前台页面，查看密文是否默认模糊。
• 将鼠标悬停在模糊文字上，查看是否变为清晰。

效果参数自定义说明

参数	说明	可调整值
filter: blur(5px)	模糊强度	3px（轻微模糊）、8px（高度模糊）
transition: 0.3s	动画过渡时间	0.2s（更快）、0.6s（更慢）
cursor: pointer	鼠标指针样式	pointer（小手）、default（默认）
user-select: none	是否允许选中文字	none（禁止选中）、text（允许选中）

功能验证

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

验证步骤

• 保存配置：确保已点击「保存设置」按钮。
• 发布文章：在文章中插入密文标签并发布。
• 刷新前台：打开文章页面，查看密文是否默认模糊。
• 测试交互：将鼠标悬停在密文上，验证是否变清晰；移开鼠标，验证是否恢复模糊。

排障指引

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

• CSS代码是否完整复制、无遗漏
• 是否粘贴在 「自定义CSS样式」 文本框（而非「自定义JavaScript代码」）
• 文章中的标签名是否与CSS中的标签名完全一致（如都是 wponss）
• 是否已点击 「保存设置」 按钮
• 浏览器缓存是否已清除（按 Ctrl+F5 强制刷新）

常见问题

问题	解决方法
密文未模糊	检查CSS代码是否已保存；检查文章中的标签名是否与CSS中的标签名一致
悬停不变清晰	检查 :hover 选择器是否与标签名匹配；确认CSS中 filter: blur(0) 已设置
模糊强度不合适	调整 filter: blur() 中的像素值（5px 改为 8px 或 3px）
文字无法选中	移除 user-select: none 属性即可恢复选中功能
自定义标签不生效	某些编辑器可能过滤未知标签，可改用 <span class="secret"> 方式，CSS中对应使用 .secret 选择器
升级主题后效果丢失	代码保存在主题设置的自定义代码中，升级主题不会丢失