1. 問(wèn)題描述

H5移動(dòng)端 img標(biāo)簽長(zhǎng)按，會(huì)出現(xiàn)如圖效果??

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

2. 解決辦法

2.1 img標(biāo)簽添加css屬性

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

img {
  pointer-events:none;
}

2.2 設(shè)置為背景圖片

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

2.3 圖片元素的同級(jí)加一個(gè)透明盒子

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

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

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

上述三種方案均可

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

最新評(píng)論