<p style="margin-top: 0px;margin-bottom: 15px;padding: 0px;box-sizing: border-box;overflow-wrap: break-word;color: rgb(51, 51, 51);line-height: 1.7;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;font-size: 16px;text-wrap: wrap;background-color: rgb(255, 255, 255)">在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。</p><h3 style="margin: 1em 0px 16px;padding: 0px;box-sizing: border-box;color: rgb(51, 51, 51);line-height: 1.43;font-size: 18px;position: relative;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;text-wrap: wrap;background-color: rgb(255, 255, 255)">方案一：使用 pointer-events:none</h3><pre class="brush:bash;toolbar:false">img{ pointer-events:none; }<br/></pre><p style="margin-top: 0px;margin-bottom: 15px;padding: 0px;box-sizing: border-box;overflow-wrap: break-word;color: rgb(51, 51, 51);line-height: 1.7;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;font-size: 16px;text-wrap: wrap;background-color: rgb(255, 255, 255)">亲测有效，适用于微信客户端的手机页面，图片被打开的情况. </p><h3 style="margin: 1em 0px 16px;padding: 0px;box-sizing: border-box;color: rgb(51, 51, 51);line-height: 1.43;font-size: 18px;position: relative;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;text-wrap: wrap;background-color: rgb(255, 255, 255)">方案二：全局属性</h3><pre class="brush:css;toolbar:false">*{<br/> -webkit-touch-callout: none;<br/> -webkit-user-select: none;<br/> -moz-user-select: none;<br/> -ms-user-select: none;<br/> user-select: none;<br/>}<br/></pre><p style="margin-top: 0px; margin-bottom: 15px; padding: 0px; box-sizing: border-box; overflow-wrap: break-word; color: rgb(51, 51, 51); line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; text-wrap: wrap; background-color: rgb(255, 255, 255);">-webkit-touch-callout主要用于禁止长按菜单。当然针对webkit内核的浏览器。</p><p style="margin-top: 0px; margin-bottom: 15px; padding: 0px; box-sizing: border-box; overflow-wrap: break-word; color: rgb(51, 51, 51); line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; text-wrap: wrap; background-color: rgb(255, 255, 255);">user-select属性是css3新增的属性，用于设置用户是否能够选中文本。</p><p style="margin-top: 0px; margin-bottom: 15px; padding: 0px; box-sizing: border-box; overflow-wrap: break-word; color: rgb(51, 51, 51); line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; text-wrap: wrap; background-color: rgb(255, 255, 255);"><strong><span style="font-size: 18px;">方案三：加一层遮罩层 </span></strong></p><p style="margin-top: 0px;margin-bottom: 15px;padding: 0px;box-sizing: border-box;overflow-wrap: break-word;color: rgb(51, 51, 51);line-height: 1.7;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;font-size: 16px;text-wrap: wrap;background-color: rgb(255, 255, 255)">图片上边加一层div类似于遮罩层，这样图片就不会被点击，右击或长按也不会出现图片另存为的选项了。 代码示例如下：</p><pre class="brush:html;toolbar:false"><div class="imgbox"><br/> <div class="imshar"></div><br/> <img src=""/><br/></div><br/><style><br/> .imgbox{<br/> position: relative;<br/> width: 80%;<br/> margin: 0 auto;<br/> margin-top: 20px;<br/>}<br/> .imgbox .imshar{<br/> position: absolute;<br/> z-index: 100;<br/> left: 0;<br/> right: 0;<br/> top: 0;<br/> bottom: 0;<br/> opacity: 0;<br/>}<br/>.imgbox img{<br/> display: block;<br/> width: 100%;<br/>}<br/></style><br/></pre><p><br/></p>
相关文章
