效果展示

原理分析

为了方便理解，每块月饼我们可以拆分为3层，分别为占位层、显示层、点击层，占位层层级最高，其他层层级依次递减；

占位层：主要作用是撑开一个空间来放月饼，不设置任何背景颜色和图片；

显示层：主要两个作用，一个是默认显示的图片（月饼图片），另外一个是挡住点击层月饼馅图片（显示层层级高于点击层）；显示层还需设置pointer-events: none，让显示层永远不会成为鼠标事件的target，点击的时候才可以穿透至点击层。

点击层：点击层被显示层覆盖着，但是它不是背景图片，点击的时候是可以被预览的；

提示：在微信内置浏览器里，背景图片点击是无法预览查看，只有img图片才可以点击预览。

模板代码

<section style="overflow: hidden;margin: 0px auto;font-size: 0px;line-height: 0;">
    <section style="text-align: center;box-sizing: border-box;">
        <!-- 第一个月饼 -->
        <section style="display: inline-block;width: 33.33%;padding: 5px;box-sizing: border-box;vertical-align: top;">
            <section style="display: inline-block;width: 100%;vertical-align: top;overflow: hidden;align-self: flex-start;box-sizing: border-box;">
                <!-- 点击显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;box-sizing: border-box;">
                        <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4wibyNficgq4oAeCYQ05ndKPAsNUd92LRichh4DC5Qicibgic6v2yicIrrCpug/0?wx_fmt=png" alt="" style="vertical-align: middle; box-sizing: border-box; width: 100% !important;"/>
                    </section>
                </section>
                <!-- 默认显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="height: 0px;pointer-events: none;box-sizing: border-box;">
                        <svg style="box-sizing: border-box;transform: rotateZ(0deg);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4I3koibeO7TCnQtH5UlmSv3nDNqf2hAiamAjYdFSiaTy6edWEbiaHest2Fg/0?wx_fmt=png);background-color:#fff;width: 100%;" viewBox="0 0 500 500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                </section>
                <!-- 撑开高度 -->
                <section style="height: 0px;padding-top: 100%;box-sizing: border-box;"></section>
            </section>
        </section>
        <!-- 第二个月饼 -->
        <section style="display: inline-block;width: 33.33%;padding: 5px;box-sizing: border-box;vertical-align: top;">
            <section style="display: inline-block;width: 100%;vertical-align: top;overflow: hidden;align-self: flex-start;box-sizing: border-box;">
                <!-- 点击显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;box-sizing: border-box;">
                        <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4fictDibUkyfTa6JFRocV5K6CWgIaRlVxgsKMCLYVoicwGhjaGkQBsp2EA/0?wx_fmt=png" alt="" style="vertical-align: middle; box-sizing: border-box; width: 100% !important;"/>
                    </section>
                </section>
                <!-- 默认显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="height: 0px;pointer-events: none;box-sizing: border-box;">
                        <svg style="box-sizing: border-box;transform: rotateZ(0deg);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4I3koibeO7TCnQtH5UlmSv3nDNqf2hAiamAjYdFSiaTy6edWEbiaHest2Fg/0?wx_fmt=png);background-color:#fff;width: 100%;" viewBox="0 0 500 500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                </section>
                <!-- 撑开高度 -->
                <section style="height: 0px;padding-top: 100%;box-sizing: border-box;"></section>
            </section>
        </section>
        <!-- 第三个月饼 -->
        <section style="display: inline-block;width: 33.33%;padding: 5px;box-sizing: border-box;vertical-align: top;">
            <section style="display: inline-block;width: 100%;vertical-align: top;overflow: hidden;align-self: flex-start;box-sizing: border-box;">
                <!-- 点击显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;box-sizing: border-box;">
                        <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4drwhAHfbEYE5GDY2tTM0TJeZ9b2vvbcgibFIkvablq9Sc9XzsDEOaCQ/0?wx_fmt=png" alt="" style="vertical-align: middle; box-sizing: border-box; width: 100% !important;"/>
                    </section>
                </section>
                <!-- 默认显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="height: 0px;pointer-events: none;box-sizing: border-box;">
                        <svg style="box-sizing: border-box;transform: rotateZ(0deg);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4I3koibeO7TCnQtH5UlmSv3nDNqf2hAiamAjYdFSiaTy6edWEbiaHest2Fg/0?wx_fmt=png);background-color:#fff;width: 100%;" viewBox="0 0 500 500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                </section>
                <!-- 撑开高度 -->
                <section style="height: 0px;padding-top: 100%;box-sizing: border-box;"></section>
            </section>
        </section>
        <!-- 第四个月饼 -->
        <section style="display: inline-block;width: 33.33%;padding: 5px;box-sizing: border-box;vertical-align: top;">
            <section style="display: inline-block;width: 100%;vertical-align: top;overflow: hidden;align-self: flex-start;box-sizing: border-box;">
                <!-- 点击显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;box-sizing: border-box;">
                        <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4wFPztTdib6FxDl3wNjxUIrJkfXndtiabibcZN73mCwHYtvdBcicbIV4OjA/0?wx_fmt=png" alt="" style="vertical-align: middle; box-sizing: border-box; width: 100% !important;"/>
                    </section>
                </section>
                <!-- 默认显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="height: 0px;pointer-events: none;box-sizing: border-box;">
                        <svg style="box-sizing: border-box;transform: rotateZ(0deg);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4I3koibeO7TCnQtH5UlmSv3nDNqf2hAiamAjYdFSiaTy6edWEbiaHest2Fg/0?wx_fmt=png);background-color:#fff;width: 100%;" viewBox="0 0 500 500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                </section>
                <!-- 撑开高度 -->
                <section style="height: 0px;padding-top: 100%;box-sizing: border-box;"></section>
            </section>
        </section>
        <!-- 第五个月饼 -->
        <section style="display: inline-block;width: 33.33%;padding: 5px;box-sizing: border-box;vertical-align: top;">
            <section style="display: inline-block;width: 100%;vertical-align: top;overflow: hidden;align-self: flex-start;box-sizing: border-box;">
                <!-- 点击显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;box-sizing: border-box;">
                        <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4CdTkEJO3m45ZqFFmgiayg9XNPmnYUoY1Py3ibmpnXgfWecHlvnFWLlAg/0?wx_fmt=png" alt="" style="vertical-align: middle; box-sizing: border-box; width: 100% !important;"/>
                    </section>
                </section>
                <!-- 默认显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="height: 0px;pointer-events: none;box-sizing: border-box;">
                        <svg style="box-sizing: border-box;transform: rotateZ(0deg);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4I3koibeO7TCnQtH5UlmSv3nDNqf2hAiamAjYdFSiaTy6edWEbiaHest2Fg/0?wx_fmt=png);background-color:#fff;width: 100%;" viewBox="0 0 500 500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                </section>
                <!-- 撑开高度 -->
                <section style="height: 0px;padding-top: 100%;box-sizing: border-box;"></section>
            </section>
        </section>
        <!-- 第六个月饼 -->
        <section style="display: inline-block;width: 33.33%;padding: 5px;box-sizing: border-box;vertical-align: top;">
            <section style="display: inline-block;width: 100%;vertical-align: top;overflow: hidden;align-self: flex-start;box-sizing: border-box;">
                <!-- 点击显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;box-sizing: border-box;">
                        <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4gbydQia5B8YND2U9ELoSicOic8tu896jzibfDicAcIXqKeuFJwU78FUotBA/0?wx_fmt=png" alt="" style="vertical-align: middle; box-sizing: border-box; width: 100% !important;"/>
                    </section>
                </section>
                <!-- 默认显示的图片 -->
                <section style="height: 0px;box-sizing: border-box;">
                    <section style="height: 0px;pointer-events: none;box-sizing: border-box;">
                        <svg style="box-sizing: border-box;transform: rotateZ(0deg);background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQnG3Zd5tjQpwGeWlZ1enZ4I3koibeO7TCnQtH5UlmSv3nDNqf2hAiamAjYdFSiaTy6edWEbiaHest2Fg/0?wx_fmt=png);background-color:#fff;width: 100%;" viewBox="0 0 500 500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                    </section>
                </section>
                <!-- 撑开高度 -->
                <section style="height: 0px;padding-top: 100%;box-sizing: border-box;"></section>
            </section>
        </section>
    </section>
</section>                     

图片素材