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弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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随机生成随机个数的字母组合示例
2014/01/14 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
PHP 实现重载
2021/03/09 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
django API 中接口的互相调用实例
2020/04/01 Python
五种Python转义表示法
2020/11/27 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
实习单位接收函
2014/01/11 职场文书
军训自我鉴定200字
2014/02/13 职场文书
大学新生军训感言
2014/02/25 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
学校清明节活动总结
2014/07/04 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL