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的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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 实现explort() 功能的详解
2013/06/20 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
yii添删改查实例
2015/11/16 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
详解python中各种文件打开模式
2020/01/19 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
暑假实习求职信范文
2013/09/22 职场文书
给女朋友的道歉信
2014/01/10 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
首都博物馆观后感
2015/06/05 职场文书
高中生军训感言
2015/08/01 职场文书