Hexo|Adobe Express帮助你创建背景透明图片

目的与背景
在基于 Hexo 框架与 Anzhiyu 主题进行博客定制时，笔者希望保留侧边栏 weixin_card 组件的悬停翻转动效，但将其内容从微信公众号展示替换为自定义图像。本操作选用《Street Fighter》系列中的春丽（Chun-Li）与嘉米（Cammy）角色图片作为正面与背面展示内容。

问题描述
直接替换图像后，发现春丽图像背景未能完全透明，存在明显残留色块（见图1），导致与卡片背景融合不佳，影响视觉效果。

解决方案
使用 Adobe Express 在线工具进行背景移除操作，具体步骤如下：

  1. 访问 Adobe Express；
  2. 选择“移除背景”功能；
  3. 上传原图并自动处理；
  4. 下载生成的透明背景 PNG 图像。

处理界面与结果如下所示：




部署与验证
将处理后的图像替换至主题对应目录，在本地执行以下命令清除缓存并启动服务：

1
hexo cl && hexo s

刷新页面后，春丽图像已完整去除背景，正常嵌入卡片正面（见图2）：

随后对嘉米图像执行相同处理，并配置为卡片的 back_face（背面图像），实现悬停翻转时的图像切换效果（见图3）：

完成状态
至此，原 weixin_card 组件的视觉样式与动效得以保留，内容已替换为定制图像，并具备完整的透明背景与双面翻转交互。

版权声明
本文所使用的春丽与嘉米角色图片来源于 Pixiv 画师 JuicePiggy16，该改造仅为个人博客美化使用，未涉及任何商业行为。