027-86866258
网站建设知识|[prov_or_city]做网站公司|seo优化排名知识

做手机网站如何禁止用户长按图片保存

2022-11-07 | 阅读:27119 首页>>新闻中心>>网站建站知识

制作手机网站时,在移动端访问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: ;

}

</style>

到此这篇关于在我们制作手机网站时,在html5移动端如何禁止长按图片保存的方法就介绍到这了,如果您也有武汉做网站的需求可以与我们联系!


TAG标签: 手机网站禁止保存图片   

相关资讯

十三年 行业经验

多一份参考,总有益处

联系新一点,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:027-86866258 / 大客户专线:刘经理:15307181953

X做网站的二维码

截屏,微信识别二维码

微信号:xinyidian8

(点击微信号复制,添加好友)

  打开微信

微信号已复制,请打开微信添加咨询详情!