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中的5个有趣的新技术
Apr 02 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
background-position百分比原理详解
May 08 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下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
python登录豆瓣并发帖的方法
2015/07/08 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
C#面试常见问题
2013/02/25 面试题
大学团支书的自我评价分享
2013/12/14 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
求职自荐信怎么写
2014/03/06 职场文书
服务承诺口号
2014/05/22 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
公司岗位说明书
2015/10/08 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
mysql配置SSL证书登录的实现
2021/09/04 MySQL