html5移动端禁止长按图片保存的实现


Posted in HTML / CSS onApril 20, 2021

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。

方案一:使用 pointer-events:none

img{
   pointer-events:none;
}

亲测有效,适用于微信客户端的手机页面,图片被打开的情况. 

方案二:全局属性

*{
   -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

-webkit-touch-callout主要用于禁止长按菜单。当然针对webkit内核的浏览器。

user-select属性是css3新增的属性,用于设置用户是否能够选中文本。

方案三:加一层遮罩层 
 

图片上边加一层div类似于遮罩层,这样图片就不会被点击,右击或长按也不会出现如图的图片另存为的选项了。  代码示例如下:

<div class="imgbox">
    <div class="imshar"></div>
    <img src=""/>
</div>
<style>
 .imgbox{
    position: relative;
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
}
 .imgbox .imshar{
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
}
.imgbox img{
    display: block;
    width: 100%;
}
</style>

到此这篇关于html5移动端禁止长按图片保存的实现的文章就介绍到这了,更多相关html5禁止长按图片保存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
纯CSS实现hover图片pop-out弹出效果的实例代码
CSS3实现的文字弹出特效
Apr 16 #HTML / CSS
Html5新增了哪些功能
Apr 16 #HTML / CSS
Html5调用企业微信的实现
Apr 16 #HTML / CSS
CSS3 制作的图片滚动效果
CSS3常见动画的实现方式
Apr 14 #HTML / CSS
You might like
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
教你用Python创建微信聊天机器人
2020/03/31 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
利用python在excel中画图的实现方法
2020/03/17 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
关爱留守儿童标语
2014/06/18 职场文书
企业标语大全
2014/07/01 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
个人委托书范本汇总
2014/10/01 职场文书
高中生毕业评语
2014/12/30 职场文书
校车安全管理责任书
2015/05/11 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis