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 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
flex弹性布局详解
Mar 20 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
php 删除数组元素
2009/01/16 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
js 字符串操作函数
2009/07/25 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
监察建议书范文
2014/03/12 职场文书
入职担保书怎么写
2014/05/12 职场文书
幼儿园运动会口号
2014/06/07 职场文书
端午节活动总结
2014/08/26 职场文书
首次购房证明
2015/06/19 职场文书
运动会报道稿大全
2015/07/23 职场文书
辅导员学期工作总结
2015/08/14 职场文书