zoukankan      html  css  js  c++  java
  • 微信APP长按图片禁止保存到本地

    项目遇到一个问题,在web页面中,禁止长按图片保存,

    使用css属性:

     img { pointer-events: none; }
    或者
     img { -webkit-user-select: none; }
    无效,
    以上属性在浏览器中是可以实现长按不能保存的,
    接下来思考到既然要让图片不能触发手机自带的长按保存事件,需要让图片失去焦点,
    如何失去焦点呢,其实很简单,只要在图片上遮一层盒子就行啦~
     
    上代码:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .box{
                     400px;
                    height: 400px;
                    border: 2px solid salmon;
                    position: relative;
                }
                .wrap{
                     400px;
                    height: 400px;
                    position: absolute;
                    opacity: 0.5;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    background-color: darkslateblue;
                    z-index: 100;
                }
                img{
                     400px;
                    height: 400px;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="wrap"></div><!--遮罩盒子-->
                <img src="img/1.jpg" />
            </div>
        </body>
    </html>

    这样就能在APP上禁止长按图片保存到本地了

  • 相关阅读:
    SpringMVC
    SpringMVC
    SpringMVC
    Spring
    Spring
    值类型和引用类型
    判断字符串的开头和结尾
    二分法(课后)
    验证码
    从1-36中随机出6个不相等的数
  • 原文地址:https://www.cnblogs.com/luna666/p/8655648.html
Copyright © 2011-2022 走看看