内嵌h5，禁止长按图片保存

最新推荐文章于 2024-05-23 15:08:56 发布

s先生的d小姐

最新推荐文章于 2024-05-23 15:08:56 发布

阅读量2.8k

点赞数 3

分类专栏：钉钉H5 CSS 移动端

本文链接：https://blog.csdn.net/weixin_44326389/article/details/118934146

版权

CSS 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

钉钉H5

6 篇文章 4 订阅

订阅专栏

移动端

5 篇文章 0 订阅

订阅专栏

本文探讨了在移动端网页中如何使用CSS属性pointer-events和user-select来控制图片交互，避免长按保存，同时介绍了通过div遮罩层和背景实现图片保护的方法。针对不同内核浏览器和隐私需求，提供了解决方案和适用场景。

摘要由CSDN通过智能技术生成

1.pointer-events:none

img{
   pointer-events:none;
}
①适用于微信客户端的手机页面，图片被打开的情况

②缺点：会禁止掉点击事件。所以当图片有点击事件的时候，给有点击事件的图片设置pointer-events:auto;那么这个图片又可以长按保存了。
 解决办法：建议外边嵌套一层div，在div上绑定事件。

img{
   user-select:none;
   -webkit-touch-callout:none;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
}
①-webkit-touch-callout主要用于禁止长按菜单。当然针对webkit内核的浏览器。

②user-select属性是css3新增的属性，用于设置用户是否能够选中文本。

③缺点：安卓机器上可能不生效。

3.加一层遮罩层

图片上边加一层div类似于遮罩层，这样图片就不会被点击，右击或长按也不会出现如图的图片另存为的选项了。
<div class="imgBox">
    <div class="imgMask"></div>
    <img src="xx.png"/>
</div>
<style>
 .imgBox{
    position: relative;
    width: 100%;
    margin: 0 auto;
      .imgMask{
	    position: absolute;
	    z-index: 100;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    opacity: 0;
	  }
	  img{
		  display: block;
		  width: 100%;
	 }
}
</style>

4.img统一用background实现。