Html5移动端禁止长按保存图片的三种实现方法

wyj911122

目录

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

1. 问题描述

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

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

2. 解决办法


2.1 img标签添加css属性

pointer-events是一个

1. css3属性

复制代码

，用于指定元素是否能响应鼠标(或触摸)事件

1. img {
   
2.   pointer-events:none;
   
3. }

复制代码

2.2 设置为背景图片

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

复制代码

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

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

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

复制代码

1. .imgMask{
   
2.         position: absolute;
   
3.         z-index: 100;
   
4.         left: 0;
   
5.         right: 0;
   
6.         top: 0;
   
7.         bottom: 0;
   
8.         opacity: 0;
   
9. }

复制代码

上述三种方案均可
到此这篇关于Html5移动端禁止长按保存图片的三种实现方法的文章就介绍到这了,更多相关Html5禁止长按保存图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

9966127

好用好用

MC_MCisBEST

非常感谢你的观点，让我受益良多！

我在宀阳没女伴

已测试，非常不错

游戏探寻官

同意！

雄杰

这个话题真是有趣，我也对它感兴趣。

ಡωಡ

每日一回

怕碗落地

确实牛逼

辐射桃子

6666666666

《飞翔》

看了LZ的帖子，我只想说一句很好很强大！