Html5移動端禁止長按保存圖片的三種實現(xiàn)方法
發(fā)布時間：2024-02-20 15:46:34 作者：Dark_programmer 
我要評論
我要評論在做html5項目的時候有個需求，就是移動端長按不保存圖片，本文就來介紹一下Html5移動端禁止長按保存圖片的三種實現(xiàn)方法，具有一定的參考價值，感興趣的可以了解一下
1. 問題描述
H5移動端 img標簽長按，會出現(xiàn)如圖效果??
那么該如何修改，能避免長按保存圖片操作呢？
2. 解決辦法
2.1 img標簽添加css屬性
pointer-events是一個css3屬性，用于指定元素是否能響應鼠標(或觸摸)事件
img {
pointer-events:none;
}2.2 設置為背景圖片
div{
background-image:url('......');
}2.3 圖片元素的同級加一個透明盒子
在img圖片層增加遮罩，設置透明度為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)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了html5移動端禁止長按圖片保存的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2021-04-19
這篇文章主要介紹了Html5頁面上如何禁止手機虛擬鍵盤彈出,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2020-03-19- 本文通過一段代碼給大家介紹了HTML5添加禁止縮放功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-11-03
