本篇内容介绍了“HTML中如何添加水印遮罩层”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>水印遮罩</title></head><style>.watermark_mask{position:fixed;top:10px;}.hello{width:500px;height:2048px;margin:0auto;background-color:pink;}</style><body><divclass="hello">HelloWorld<div>HelloWorld2</div><div>HelloWorld3</div></div><divid="watermarkId"class="watermark_mask"></div><script>constwatermarkId="watermarkId";//水印遮罩函数functionwatermarkUtils(settings,id){//默认设置vardefaultSettings={watermark_txt:"text",watermark_x:10,//水印起始位置x轴坐标watermark_y:20,//水印起始位置Y轴坐标watermark_rows:55,//水印行数watermark_cols:55,//水印列数watermark_x_space:10,//水印x轴间隔watermark_y_space:10,//水印y轴间隔watermark_color:'#000000',//水印字体颜色watermark_alpha:0.2,//水印透明度watermark_fontsize:'15px',//水印字体大小watermark_font:'微软雅黑',//水印字体watermark_width:50,//水印宽度watermark_height:20,//水印长度watermark_angle:25//水印倾斜度数};//采用配置项替换默认值，作用类似jquery.extendif(typeofsettings==="object"){varsrc=settings;for(letkeyinsrc){if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])continue;elseif(src[key])defaultSettings[key]=src[key];}}varoTemp=document.createDocumentFragment();//varoTemp=document.createElement("div");//获取页面最大宽度varpage_width=Math.max(document.body.scrollWidth,document.body.clientWidth);//获取页面最大长度varpage_height=Math.max(document.body.scrollHeight,document.body.clientHeight);//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔if(defaultSettings.watermark_cols==0||(parseInt(defaultSettings.watermark_x+defaultSettings.watermark_width*defaultSettings.watermark_cols+defaultSettings.watermark_x_space*(defaultSettings.watermark_cols-1))>page_width)){defaultSettings.watermark_cols=parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space)/(defaultSettings.watermark_width+defaultSettings.watermark_x_space));defaultSettings.watermark_x_space=parseInt((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width*defaultSettings.watermark_cols)/(defaultSettings.watermark_cols-1));}//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔if(defaultSettings.watermark_rows==0||(parseInt(defaultSettings.watermark_y+defaultSettings.watermark_height*defaultSettings.watermark_rows+defaultSettings.watermark_y_space*(defaultSettings.watermark_rows-1))>page_height)){defaultSettings.watermark_rows=parseInt((defaultSettings.watermark_y_space+page_height-defaultSettings.watermark_y)/(defaultSettings.watermark_height+defaultSettings.watermark_y_space));defaultSettings.watermark_y_space=parseInt(((page_height-defaultSettings.watermark_y)-defaultSettings.watermark_height*defaultSettings.watermark_rows)/(defaultSettings.watermark_rows-1));}varx;vary;for(vari=0;i<defaultSettings.watermark_rows;i++){y=defaultSettings.watermark_y+(defaultSettings.watermark_y_space+defaultSettings.watermark_height)*i;for(varj=0;j<defaultSettings.watermark_cols;j++){x=defaultSettings.watermark_x+(defaultSettings.watermark_width+defaultSettings.watermark_x_space)*j;varmask_div=document.createElement('div');mask_div.id='mask_div'+i+j;mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));//设置水印div倾斜显示mask_div.style.webkitTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.MozTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.msTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.OTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.transform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.visibility="";mask_div.style.position="absolute";//选不中mask_div.style.left=x+'px';mask_div.style.top=y+'px';mask_div.style.overflow="hidden";mask_div.style.zIndex="9999";mask_div.style.pointerEvents="none";//mask_div.style.border="solid#eee1px";mask_div.style.opacity=defaultSettings.watermark_alpha;mask_div.style.fontSize=defaultSettings.watermark_fontsize;mask_div.style.color=defaultSettings.watermark_color;mask_div.style.textAlign="center";mask_div.style.width=defaultSettings.watermark_width+'px';mask_div.style.height=defaultSettings.watermark_height+'px';mask_div.style.display="block";oTemp.appendChild(mask_div);};};//document.body.appendChild(oTemp);try{//console.log(document.getElementById(id),"document.getElementById(id)");document.getElementById(id).appendChild(oTemp);}catch(error){console.error(error,"遮罩异常");}};watermarkUtils({watermark_txt:"9527",watermark_width:60,watermark_fontsize:"14px"},watermarkId);</script></body></html>

核心代码：

constwatermarkId="watermarkId";//水印遮罩函数functionwatermarkUtils(settings,id){//默认设置vardefaultSettings={watermark_txt:"text",watermark_x:10,//水印起始位置x轴坐标watermark_y:20,//水印起始位置Y轴坐标watermark_rows:55,//水印行数watermark_cols:55,//水印列数watermark_x_space:10,//水印x轴间隔watermark_y_space:10,//水印y轴间隔watermark_color:'#000000',//水印字体颜色watermark_alpha:0.2,//水印透明度watermark_fontsize:'15px',//水印字体大小watermark_font:'微软雅黑',//水印字体watermark_width:50,//水印宽度watermark_height:20,//水印长度watermark_angle:25//水印倾斜度数};//采用配置项替换默认值，作用类似jquery.extendif(typeofsettings==="object"){varsrc=settings;for(letkeyinsrc){if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])continue;elseif(src[key])defaultSettings[key]=src[key];}}varoTemp=document.createDocumentFragment();//varoTemp=document.createElement("div");//获取页面最大宽度varpage_width=Math.max(document.body.scrollWidth,document.body.clientWidth);//获取页面最大长度varpage_height=Math.max(document.body.scrollHeight,document.body.clientHeight);//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔if(defaultSettings.watermark_cols==0||(parseInt(defaultSettings.watermark_x+defaultSettings.watermark_width*defaultSettings.watermark_cols+defaultSettings.watermark_x_space*(defaultSettings.watermark_cols-1))>page_width)){defaultSettings.watermark_cols=parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space)/(defaultSettings.watermark_width+defaultSettings.watermark_x_space));defaultSettings.watermark_x_space=parseInt((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width*defaultSettings.watermark_cols)/(defaultSettings.watermark_cols-1));}//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔if(defaultSettings.watermark_rows==0||(parseInt(defaultSettings.watermark_y+defaultSettings.watermark_height*defaultSettings.watermark_rows+defaultSettings.watermark_y_space*(defaultSettings.watermark_rows-1))>page_height)){defaultSettings.watermark_rows=parseInt((defaultSettings.watermark_y_space+page_height-defaultSettings.watermark_y)/(defaultSettings.watermark_height+defaultSettings.watermark_y_space));defaultSettings.watermark_y_space=parseInt(((page_height-defaultSettings.watermark_y)-defaultSettings.watermark_height*defaultSettings.watermark_rows)/(defaultSettings.watermark_rows-1));}varx;vary;for(vari=0;i<defaultSettings.watermark_rows;i++){y=defaultSettings.watermark_y+(defaultSettings.watermark_y_space+defaultSettings.watermark_height)*i;for(varj=0;j<defaultSettings.watermark_cols;j++){x=defaultSettings.watermark_x+(defaultSettings.watermark_width+defaultSettings.watermark_x_space)*j;varmask_div=document.createElement('div');mask_div.id='mask_div'+i+j;mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));//设置水印div倾斜显示mask_div.style.webkitTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.MozTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.msTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.OTransform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.transform="rotate(-"+defaultSettings.watermark_angle+"deg)";mask_div.style.visibility="";mask_div.style.position="absolute";//选不中mask_div.style.left=x+'px';mask_div.style.top=y+'px';mask_div.style.overflow="hidden";mask_div.style.zIndex="9999";mask_div.style.pointerEvents="none";//mask_div.style.border="solid#eee1px";mask_div.style.opacity=defaultSettings.watermark_alpha;mask_div.style.fontSize=defaultSettings.watermark_fontsize;mask_div.style.color=defaultSettings.watermark_color;mask_div.style.textAlign="center";mask_div.style.width=defaultSettings.watermark_width+'px';mask_div.style.height=defaultSettings.watermark_height+'px';mask_div.style.display="block";oTemp.appendChild(mask_div);};};//document.body.appendChild(oTemp);try{//console.log(document.getElementById(id),"document.getElementById(id)");document.getElementById(id).appendChild(oTemp);}catch(error){console.error(error,"遮罩异常");}};//使用watermarkUtils({watermark_txt:"9527",watermark_width:60,watermark_fontsize:"14px"},watermarkId);

“HTML中如何添加水印遮罩层”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！