教程|图片跳转

还有这种骚操作？！

案  例

今天主要讲解「假装」从一张图片调转到另一张图片的效果，案例如下：

❶ 135 排版大赛中的点击图标查看英雄效果

❷「吉大招办」公众号底部功能区导航按钮

❸「小编备用」公众号底部二维码按钮

❹ 吉林大学近三年各省份录取情况检索表

PNG 格式图片

前段时间好像有个编辑器的微信公众平台发过类似教程，忘记是 135 还是 i 排版了。如果你会这一步的话可以直接跳到下一部分，真正的黑科技还在后面。

如上图所示，戳开之后会出现一大堆真理。这个套路已经被玩腻了，小编简单讲一下原理：做小编的通常会接触到 jpg、png、gif 这三种格式的图片。jpg 是质量最高的（质量越高，上传时压缩也就越严重），png 是可以保存透明度的，gif 是会动的。上图是一张背景透明的 png 格式图片，将其中的字分为黑白两种颜色。由于微信图文页面的背景默认为白色，所以当不点开图片时，只能看到黑色的文字；微信查看图片页面的背景默认为黑色，所以点开图片查看时，只能看到白色的文字。所以上图其实是这样的 ▼

制作方法：在 PS 中新建画布，把想显示的字设置成纯黑，想隐藏的字设置成微信图文的背景色，然后把画布的纯色背景删除，储存为 png 格式就 ok 了。

高  端  操  作

讲真，上述这种套路简直 LOW 爆，连低层次装逼都算不上。首先，做这种图片会产生大范围的留白，极有可能影响整篇文章的排版；其次，隐藏文字与显示的文字不能重叠，这就导致隐藏文字的排版受到极大限制，很难做到实用又美观。

正确的装逼方式应该是这样的：戳下方的按钮，查看真理 ▼

升华版的装逼方式应该是这样的：戳下方的按钮看小编英姿 ▼

不好意思，打错了，是「影子」，不是「英姿」。这两张图才是真正的「图片跳转」，原理：黑色的小圆点是背景图，跳转后的图片叠放在小圆点图片上方，但其透明度设置为零。

教  程

先给大家介绍不用代码实现这种效果的方法（不用代码只能实现正确的装逼方式，不能实现升华版的装逼方式）

❶ 用同样的方法制作一张 png 格式的透明图，小圆点可以适当缩小，并放在角落位置，以隐藏文字的排版为主。 ▼

❷ 在秀米编辑器中找到带有遮罩效果的图片模板，通过拖拽的方法，使可视视野内只有小圆点，其它部分隐藏。 ▼

就这样轻松加愉快地实现正确的装逼方式了。秀米编辑器是将 css 盒子模型可视化的编辑器，其布局模式是很方便的。但为了让代码完全可视化操作，秀米直接阉割了 HTML 编辑器，对小编来说，用起来就很闹心了……

再来介绍一下如何用代码实现升华版装逼方式。为了给大家减少难度，小编直接在秀米的基础上进行更改，不再徒手写代码（上述操作基本可以满足绝大多数需求，如果懒得烧脑可忽略下面的内容）

❶ 上传一张想跳转的图片，并获取其链接。

❷ 将刚才的图导入到公众号后台编辑器中，戳「F12」进入开发者模式。用选择工具找到图片代码，将<img>标签中的图片链接替换为想要跳转的图片的链接。

总  结

跳转图片在微信排版中的用途广泛，可以做按钮、导航、二维码……让排版更简洁的同时，给读者提供一定的交互性。祝大家装逼愉快。