评论

SVG公众号排版『适配深色模式图片二维码可识别可点击』模板代码

大家都知道公众号文章在深色模式下图片会变暗,因此会使用SVG无缝图来适配深色模式,但是会出现另外的问题,比如点击图片不弹出、长按图片二维码无法识别,今天给大家分享一下如何解决该问题。

模板效果

点击查看效果

模板代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
    <title>公众号:懂点君 || 视频号:懂点君 || 微信号:dong_dian_jun</title>
    <style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0;}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important;}</style>
</head>
<body>
    <div class="rich_media_content" style="visibility: visible;weixin: dong_dian_jun;" data-label="H5 & SVG定制咨询微信:dong_dian_jun">
        <section style="overflow: hidden; font-size: 0px;weixin: dong_dian_jun;">
            <!-- 图片可点击 -->
            <section style="height: 0;weixin: dong_dian_jun;">
                <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ1SYgbDLQdCM3JPK1xaXjc5Kc1uRow4a3IR3C76ZeT5unvaia2XF9k65QXNEiarJC05czxtZt0ibkiaw/0?wx_fmt=png" style="display: block;width: 100%;"/>                
            </section>
            <!-- 禁止点击 -->
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 750 1500" style="display: inline-block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ1SYgbDLQdCM3JPK1xaXjc5Kc1uRow4a3IR3C76ZeT5unvaia2XF9k65QXNEiarJC05czxtZt0ibkiaw/0?wx_fmt=png) no-repeat;background-size: 100%;pointer-events: none;vertical-align: top;transform: scale(1);isolation: isolate;"></svg>
        </section>
    </div>
</body>
</html>
点赞 1
收藏
评论

1 个评论

  • 梦幻雪冰
    梦幻雪冰
    2021-11-18

    有问题微信沟通:dong_dian_jun

    2021-11-18
    赞同
    回复
登录 后发表内容