Html5移動端禁止長按保存圖片的三種實現(xiàn)方法

發(fā)布時間：2024-02-20 15:46:34 作者：Dark_programmer

在做html5項目的時候有個需求，就是移動端長按不保存圖片，本文就來介紹一下Html5移動端禁止長按保存圖片的三種實現(xiàn)方法，具有一定的參考價值，感興趣的可以了解一下

1. 問題描述

H5移動端 img標簽長按，會出現(xiàn)如圖效果??

在這里插入圖片描述

那么該如何修改，能避免長按保存圖片操作呢？

pointer-events是一個css3屬性，用于指定元素是否能響應(yīng)鼠標(或觸摸)事件

img {
  pointer-events:none;
}

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

在img圖片層增加遮罩，設(shè)置透明度為0，這樣圖片不會被點擊，也不會出現(xiàn)長按保存圖片操作。

圖片元素的外層元素為div標簽，才能實現(xiàn)該需求。如果外層元素為a標簽則不行

.imgMask{ 
	position: absolute; 
	z-index: 100; 
	left: 0; 
	right: 0; 
	top: 0; 
	bottom: 0; 
	opacity: 0; 
}

上述三種方案均可

到此這篇關(guān)于Html5移動端禁止長按保存圖片的三種實現(xiàn)方法的文章就介紹到這了,更多相關(guān)Html5禁止長按保存圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！