H5 - - - - 移动端禁止长按保存图片

news2024/11/22 20:55:53

H5 - - - - 移动端禁止长按保存图片

  • 1. 问题描述
  • 2. 解决办法
    • 2.1 img标签添加css属性
    • 2.2 设置为背景图片
    • 2.3 图片元素的同级加一个透明盒子

1. 问题描述

H5移动端 img标签长按,会出现如图效果⬇️

在这里插入图片描述

那么该如何修改,能避免长按保存图片操作呢?

2. 解决办法

2.1 img标签添加css属性

pointer-events是一个css3属性,用于指定元素是否能响应鼠标(或触摸)事件

img {
  pointer-events:none;
}

2.2 设置为背景图片

div{
	background-image:url('......');
}

2.3 图片元素的同级加一个透明盒子

在img图片层增加遮罩,设置透明度为0,这样图片不会被点击,也不会出现长按保存图片操作。

图片元素的外层元素为div标签,才能实现该需求。如果外层元素为a标签则不行

.imgMask{ 
	position: absolute; 
	z-index: 100; 
	left: 0; 
	right: 0; 
	top: 0; 
	bottom: 0; 
	opacity: 0; 
}

上述三种方案均可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1308065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想Day36 | 435. 无重叠区间、763.划分字母区间、56. 合并区间

435. 无重叠区间 这道题和前一天的射箭题目思想类似,用总区间个数-不重叠的区间个数等于需要去除的区间个数。首先对左边界排序,如果当前的左边界大于等于上一区间的右边界,则说明是一个不重叠的区间,否则,更新上一重…

Microsoft 发布了 12 月份产品安全问题修复报告。

🔥 Microsoft 发布了 12 月份产品安全问题修复报告。 请注意趋势漏洞 CVE-2023-36011 和 CVE-2023-35632。这些漏洞与 Win32k 内核和负责网络通信的辅助功能驱动程序 (AFD) 驱动程序中的缺陷有关。成功利用这两个漏洞可让进入 Windows 系统的攻击者将其权限提升至系…

NXP应用随记(二):S32K3xx内存随记

目录 1、TCM 1.1、代码放置在ITCM的方式 __attribute__ 的函数属性 __attribute__ 的变量属性 __attribute__ 的类型属性 __attribute__ 的优化控制属性 1.2、DTCM 1.3、TCM的使用注意事项 1、TCM CMTightly Coupled Memory,是一种高速缓存,据说是…

【EI会议征稿】第三届电力系统与电力工程国际学术会议(PSPE 2024)

第三届电力系统与电力工程国际学术会议(PSPE 2024) 2024 3rd International Conference on Power System and Power Engineering(PSPE 2024) 第三届电力系统与电力工程国际学术会议(PSPE 2024)于2024年3月29-31日在中国三亚隆重召…

开发案例:使用canvas实现图表系列之折线图

一、功能结构 实现一个公共组件的时候,首先分析一下大概的实现结构以及开发思路,方便我们少走弯路,也可以使组件更加容易拓展,维护性更强。然后我会把功能逐个拆开来讲,这样大家才能学习到更详细的内容。下面简单阐述…

C++怎么快速提升实力?

C怎么快速提升实力? 在开始前我有一些资料,是我根据自己从业十年经验,熬夜搞了几个通宵,精心整理了一份「C的资料从专业入门到高级教程工具包」,点个关注,全部无偿共享给大家!!&…

redis-学习笔记(Jedis hash简单命令)

hset & hget 往 hash 里面塞数据和获取数据 示例代码 hmset & hmget 批量插入数据, 获取数据 注意, hmset 里面插入的是一个 Map hmget 的返回值是一个一个 List 列表 (参数仍是变长参数) 示例代码 hexists 判断 hash 中 域值 存不存在 示例代码 hdel 删除指定的域和值…

SpringBoot 引入nacos 【最新 | 可运行】

SpringBoot 引入nacos 首先要了解在 Springboot 中只支持那些 Springboot 的版本(我真的被这个搞死了),可以如下图参考: 下面我们就开始吧 下载 Nacos nacos 下载地址,这里可以选择你要下载的版本,我选择下载了2.2.…

基于Java8构建Docke镜像

基于Java8构建Docke镜像 搜索java8安装包 docker search java8 --no-trunc , --no-trunc展开描述信息 选择拉取 docker pull docker.io/mykro/java8-jre,为了减少磁盘占用,选择jre版本基础镜像 在宿主机创建文件夹iot,并把所需…

【FPGA/verilog -入门学习4】verilog 实现多路脉冲计数

需求: 设计一个脉冲计数器,其功能如下 输入脉冲:4路脉冲信号,分别对每路进行脉冲检测并计数 使能信号:高电平进行计数,低电平清零计数器 计数器:在使能信号高电平期间,对脉冲信号…

Kubernetes版本升级到v1.18.0方法

升级k8s版本才能使用kube-prometheus安装监控 1、查看集群状态 [rootk8s-master k8s-script]# kubectl get nodes NAME STATUS ROLES AGE VERSION k8s-master Ready master 5d22h v1.18.0 k8s-slave1 Ready <none> 4d10h v1.18.0 k…

Tomcat部署Activiti官方 流程设计器【数据库更换为Mysql !!!】

一、官网下载activiti6 解压后结构如下: database&#xff1a; 存放数据库对象相关脚本&#xff0c;包含不同的数据库脚本 libs&#xff1a; 包含activiti开发过程中需要用到的jar包和源码&#xff0c;不建议通过jar包直接引用&#xff0c;建议通过maven进行管理 wars&am…

opencv 十五 红外图像中虹膜的提取

一、算法需求 在医疗检测中&#xff0c;需要使用红外相机拍摄眼睛照片&#xff0c;然后提取出虹膜的区域。在拍摄过程瞳孔需要进行运动&#xff0c;其通常不在正前方&#xff0c;无法形成圆形&#xff0c;不能使用常规的霍夫圆检测进行提取定位。且在在红外图像中&#xff0c;…

数据结构和算法 - 前置扫盲

数据结构和算法 一、前置扫盲 1、数据结构分类 1.1 逻辑结构&#xff1a;线性与非线性 tip&#xff1a;逻辑结构揭示了数据元素之间的逻辑关系。 线性数据结构&#xff1a;元素间存在明确的顺序关系。 数据按照一定顺序排列&#xff0c;其中元素之间存在一个对应关系&#x…

第二百零四回 模拟对话窗口的页面

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 经验分享5. 内容总结 我们在上一章回中介绍了"修改组件风格的另外一种方法"相关的内容&#xff0c;本章回中将介绍" 如何做一个模拟对话框窗口的页面".闲话休提&#xff0c;让我…

PCL点云处理之判断某一点在三角形的内部、外部、还是边上(二百二十二)

PCL点云处理之判断某一点在三角形的内部、外部、还是边上(二百二十二) 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 点与三角形的位置共有三种: 1 内部 2 外部 3 点刚好在边上 (这个判断还是很有必要的,应用广泛,下面代码复制粘贴即可使用,纯C++实现) 二、算…

模块一——双指针:18.四数之和

文章目录 题目描述算法原理排序双指针 代码实现排序双指针复杂度分析时间复杂度&#xff1a;O(N^3^)空间复杂度&#xff1a;O(log⁡N)或者O(N) 题目描述 题目链接&#xff1a;18.四数之和 算法原理 排序双指针 依次固定⼀个数a &#xff1b;在这个数a 的后⾯区间上&#x…

点云几何 之 计算二维平面某一点到直线的距离(2)

点云几何 之 计算二维平面某一点到直线的距离&#xff08;2&#xff09; 一、算法介绍.二、算法实现1.代码2.结果 总结 一、算法介绍. 计算某一点到直线的距离&#xff0c;这里的直线会用2个点来表示&#xff0c;如果你只有直线上一点和直线的方向向量&#xff0c;应该也可以转…

yo!这里是Linux信号相关介绍

目录​​​​​​​ 前言 基本介绍 概念 信号列表 信号处理 产生(发送)信号 通过按键产生 系统函数产生 软件条件产生 硬件异常产生 阻塞信号 信号状态 sigset_t 状态相关函数 1.sigprocmask 2.sigpending 捕捉信号 内核态与用户态 捕捉过程 sigaction 后…

1.4 Postman的安装

hello大家好&#xff0c;本小节我们来安装一下Postman&#xff0c;好为我们后续的测试工作做准备。 首先&#xff0c;打开Postman的官网Postman API Platform 然后根据同学们自己电脑的操作系统来下载对应的Postman安装包。我这里拿windows来举例。我们点击windows的图标 会跳…