利用手机上阅读公众号时查看图片时的一个小玩法

做个小实验

下面有一张图片，如果你是用手机看公众号文章的话，那么记得点一下图片，看你得到的是什么？

是不是看到几个文字，然后不再有黑心了，而是没心了呢？

实验来源

其实这个很早之前就在一些公众号里出现过了，娱乐的方式其实很多人也都玩过了。比如微信朋友圈里发九张图，然后点击之后会看到更多图片内容；还有微博里的九张图也是一样。

在朋友圈或者微博中的玩法是利用图片的显示中间的部分，然后制作了特定的大小的图片后，刚好在缩略图时显示中间那一块，最后再把九张缩略图拼成一张“大图”的感觉。

这样的方式早之前在朋友圈里我玩过，不过是很早很早之前的事情了。而这次的这个方式呢，是之前在某几个公众号里看到的。形式就跟最前面的那张图片一样，点击后，某个部分的图片信息了，显示了其他部分的图片。

所谓的分析

刚开始不知道，以为是公众号中可以点击图片打开一张新图片的 URL 来显示。在自己玩了公众号了解了之后，才知道，公众号里是不可以加外链的，最多也就是自身公众号内的文章跳转。

那么这个是怎么实现的呢，其实分析起来很简单，图片还是图片，公众号的编辑器中也没有提供相关的功能可以使用。可用的方式就只能从图片上着手了。

当然了，只要在桌面端的浏览器中打开某篇公众号，我们就可以直接获取到图片，然后在 Photoshop 中看看图片上有什么内容。所以，也没什么好分析的，简单来说就是这样：

• 图片是 png32 的透明图

• 颜色只有黑和白两种颜色（这里为了看到效果故意给了一个透明底色）

那么只要把这张图片贴到公众号文章中，在手机中查看的时候就是白色黑字，而点击图片之后，微信里查看公众号图片时，背景色是黑色的，所以，就看到了白色的文字了。

够简单吧！所以呢，这张图片内具体怎么用就看公众号的运营者想怎么玩了，反正就是黑白两色，利用背景色的关系“隐藏”一部分内容。

像这张，就是把颜色反过来玩了。所以，怎么还是看创意了，这个显然我没有。

刚开始的天真想法

在实际玩的过程中，不可能是把这么大的图片放在文章中的，而是一张小图。所以，最开始的时候，我的想法是直接通过 clip-path 来裁切掉部分图片，这样会显得小一些，结果我发现自己错了。

通过 clip-path 裁切的只是图片显示的部分，而图片的原始大小是不会改变。那么我就想啊，不如再加一个宽度来控制吧，就像这样：

结果发现在公众号编辑器里是还可以，就像这个截图一样：

然而，在手机中预览的时候，clip-path 并没有效果。或许可能是因为编辑器里最终会把部分样式给“干掉”了吧。所以，最终并没有看到效果。

公众号编辑器 markdown 使用

一般玩公众号的前端同学都是通过写 markdown 文档的方式生成页面，然后复制过来；或者直接通过 Chrome 插件把微信公众号中的 markdown 文档转为具有一定样式的内容。

• http://js8.in/mpeditor/ 这个是通过在线编辑 markdown 方式后，直接复制的，具体的使用方式站点里有介绍；

• Chrome 的扩展程序 Markdown Here，直接将页面中的编辑器内容转化掉（通过写 markdown 方式后转化的，我现在用的就是这个）；

• 通过 HTML 和 CSS 写一个页面，CSS 写在 style 属性中，然后在最终的页面中全选-复制-黏贴到微信公众号编辑器中即可；

• 还有就是别人整的专门针对微信公众号的“第三方编辑器”；

感想

放弃了自己的天真的想法之后，唯有感慨当初利用图片的颜色来做效果的人真会玩。

如果想要把图片变小一点，其实可以通过其他编辑器或者上面所说的 markdown 的方式来操作，这个我想应该不是什么大问题，毕竟在我的那个天真的想法中，仅有 clip-path 是没有效果，而 width 和 float 还是有效果的。

所以啊，公众号的文章，要不还是在手机中看吧，无论怎么样，至少还有评论可以玩啊！

闲扯CSS的那些事儿，没啥事儿就谈谈CSS
不深入，只扯淡
扯点自己想说的，或许也是你想听的，没有高深的东西，但应该不是平庸的……