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

分享到

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

html5 来源：互联网作者：佚名发布时间：2024-02-23 22:06:56 人浏览

摘要

1. 问题描述 H5移动端 img标签长按，会出现如图效果?? 那么该如何修改，能避免长按保存图片操作呢？ 2. 解决办法 2.1 img标签添加css属性 pointer-events是一个css3属性，用于指定元素是否能响应

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;

}

上述三种方案均可

您可能感兴趣的文章 :

原文链接 :

Tag : html5(153)移动端(98)

HTML5中video标签禁止右键和下载视频的问题解决

近期做了一个关于在线文件管理的项目，类似网盘，基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能，领挖还
Html5移动端禁止长按保存图片的三种实现方法

1. 问题描述 H5移动端 img标签长按，会出现如图效果?? 那么该如何修改，能避免长按保存图片操作呢？ 2. 解决办法 2.1 img标签添加css属性 po
HTML5 video播放有声音无图像的解决方法

1.概述今天遇到一个问题，HTML5 video播放有声音无图像，该视频本地是能播放的。使用html播放的时候只有声音没有视频，一片漆黑。而且奇
HTML5键盘弹起遮挡输入框的解决方法介绍

混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体
Canvas画布渲染不出来的问题解决方法

学习Canvas的时候，打算描绘一个矩形并测试清除画布方法时，当编写完基本的canvas代码时，发现！画布内的矩形无法显示出来。代码如下
html5登录玻璃界面特效的代码

具体如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
HTML5标签正确的使用方式介绍

1.主体内容和隐藏方式 1.1 main 标签 ???? 构建主要内容 main标签代表网页的主要内容。通过为主要内容提供清晰的结构，它对提高网页的可访问
elementUI中el-date-picker如何禁用指定日期之前或之后

一、elementUI中el-date-picker禁用指定日期之前或之后的日期通过配置picker-options配置指定禁用日期（pickerOptions写到data里面） 1 2 3 4 5 6 7 8 9 el
HTML5实现同时选择多个文件夹上传的使用介绍

HTML5的上传API可以支持同时选择多个文件和选择单个文件夹，但不支持同时选择多个文件夹。如果想同时选择多个文件夹，那只能另辟蹊径，
使用H5实现短信验证码一键登录功能

一、技术栈 uniapp+vue3+javascript 二、实现的效果全部代码可见：https://github.com/zzm319/study-summarize.git（分支为code-login）。 1、进入页面第一个输