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的transform中scale缩放详解
Dec 08 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 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制作新闻系统的思路
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Python显示进度条的方法
2014/09/20 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python实现银行管理系统
2019/10/25 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
python中实现词云图的示例
2020/12/19 Python
python 装饰器的基本使用
2021/01/13 Python
数控技术应届生求职信
2013/11/13 职场文书
大学生求职信
2014/06/17 职场文书
关于旅游的活动方案
2014/08/15 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android