html中实现添加水印的功能

1、使用背景图添加水印

2、使用定位添加水印

3、使用js添加可配置控制水印

CSS:

[css]  view plain  copy

1. body{background-color: #eef1f8;}  
2. #one{padding: 10px 15px;background-color: #FFFFFF;background-image: url(http://pic.58pic.com/58pic/12/28/02/05J58PICUwy.jpg);background-repeat: no-repeat;background-size: 50%;background-position: center;opacity: 0.9;}  
3. #two{padding: 10px 15px;background-color: #FFFFFF;margin-top: 10px;position: relative;}  
4. #three{padding: 10px 15px;background-color: #FFFFFF;margin-top: 10px;}  
5. #two-bg{position: absolute;top:0;right:0;left:0;z-index: 0;width: 200px;height: 200px;}  
6. #two-bg img{width: 100%;}  

HTML

[html]  view plain  copy

1. <!--使用背景图添加水印-->  
2. <div id="one">  
3.      <p>这是一段文字</p>  
4.     <ul>  
5. <span style="white-space:pre">  </span> <li>这是第1个</li>  
6.         <li>这是第2个</li>  
7.         <li>这是第3个</li>  
8.         <li>这是第4个</li>  
9.         <li>这是第5个</li>  
10.     </ul>  
11. </div>  
12. <!--使用定位添加水印-->  
13. <div id="two">  
14.     <p>这是一大段文字照着找着做做做做做做做做做做做做做做做</p>  
15.     <ul>  
16.         <li>这是第1个</li>  
17.         <li>这是第2个</li>  
18.         <li>这是第3个</li>  
19.         <li>这是第4个</li>  
20.         <li>这是第5个</li>  
21.     </ul>  
22. <span style="white-space:pre">  </span><!--图片透明 png格式的图片-->  
23. <span style="white-space:pre">  </span><div id="two-bg"><img src="img/search.png"/></div>  
24. </div>  
25. <!---->  
26. <div id="three">  
27.     <p>看看看看扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</p>  
28.     <ul>  
29. <span style="white-space:pre">  </span> <li>这是第1个</li>  
30.         <li>这是第2个</li>  
31.         <li>这是第3个</li>  
32.         <li>这是第4个</li>  
33.         <li>这是第5个</li>  
34.     </ul>  
35. </div>  

JavaScript

[javascript]  view plain  copy

1. watermark({ watermark_txt: "测试水印" })//传入动态水印内容  
2.     function watermark(settings) {  
3.     //默认设置  
4.     var defaultSettings={  
5.         watermark_txt:"text",  
6.         watermark_x:100,//水印起始位置x轴坐标  
7.         watermark_y:20,//水印起始位置Y轴坐标  
8.         watermark_rows:20,//水印行数  
9.         watermark_cols:20,//水印列数  
10.         watermark_x_space:100,//水印x轴间隔  
11.         watermark_y_space:50,//水印y轴间隔  
12.         watermark_color:'#000000',//水印字体颜色  
13.         watermark_alpha:0.3,//水印透明度  
14.         watermark_fontsize:'18px',//水印字体大小  
15.         watermark_font:'微软雅黑',//水印字体  
16.         watermark_width:120,//水印宽度  
17.         watermark_height:80,//水印长度  
18.         watermark_angle:15//水印倾斜度数  
19.     };  
20.     //采用配置项替换默认值，作用类似jquery.extend  
21.     if(arguments.length===1&&typeof arguments[0] ==="object" )  
22.     {  
23.         var src=arguments[0]||{};  
24.         for(key in src)  
25.         {  
26.             if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])  
27.                 continue;  
28.             else if(src[key])  
29.                 defaultSettings[key]=src[key];  
30.         }  
31.     }  
32.   
33.     var oTemp = document.createDocumentFragment();  
34.   
35.     //获取页面最大宽度  
36.     var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);  
37.     //获取页面最大长度  
38.     var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);  
39.   
40.     //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔  
41.     if (defaultSettings.watermark_cols == 0 ||  
42.    　　　　(parseInt(defaultSettings.watermark_x   
43. 　　　　+ defaultSettings.watermark_width *defaultSettings.watermark_cols   
44. 　　　　+ defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1))   
45. 　　　　> page_width)) {  
46.         defaultSettings.watermark_cols =   
47. 　　　　　　parseInt((page_width  
48. 　　　　　　　　　　-defaultSettings.watermark_x  
49. 　　　　　　　　　　+defaultSettings.watermark_x_space)   
50. 　　　　　　　　　　/ (defaultSettings.watermark_width   
51. 　　　　　　　　　　+ defaultSettings.watermark_x_space));  
52.         defaultSettings.watermark_x_space =   
53. 　　　　　　parseInt((page_width   
54. 　　　　　　　　　　- defaultSettings.watermark_x   
55. 　　　　　　　　　　- defaultSettings.watermark_width   
56. 　　　　　　　　　　* defaultSettings.watermark_cols)   
57. 　　　　　　　　　　/ (defaultSettings.watermark_cols - 1));  
58.     }  
59.     //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔  
60.     if (defaultSettings.watermark_rows == 0 ||  
61.    　　　　(parseInt(defaultSettings.watermark_y   
62. 　　　　+ defaultSettings.watermark_height * defaultSettings.watermark_rows   
63. 　　　　+ defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1))   
64. 　　　　> page_height)) {  
65.         defaultSettings.watermark_rows =   
66. 　　　　　　parseInt((defaultSettings.watermark_y_space   
67. 　　　　　　　　　　　+ page_height - defaultSettings.watermark_y)   
68. 　　　　　　　　　　　/ (defaultSettings.watermark_height + defaultSettings.watermark_y_space));  
69.         defaultSettings.watermark_y_space =   
70. 　　　　　　parseInt((page_height   
71. 　　　　　　　　　　- defaultSettings.watermark_y   
72. 　　　　　　　　　　- defaultSettings.watermark_height   
73. 　　　　　　　　　　* defaultSettings.watermark_rows)   
74. 　　　　　　　　　/ (defaultSettings.watermark_rows - 1));  
75.     }  
76.     var x;  
77.     var y;  
78.     for (var i = 0; i < defaultSettings.watermark_rows; i++) {  
79.         y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;  
80.         for (var j = 0; j < defaultSettings.watermark_cols; j++) {  
81.             x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;  
82.   
83.             var mask_div = document.createElement('div');  
84.             mask_div.id = 'mask_div' + i + j;  
85.             mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));  
86.             //设置水印div倾斜显示  
87.             mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
88.             mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
89.             mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
90.             mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
91.             mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";  
92.             mask_div.style.visibility = "";  
93.             mask_div.style.position = "absolute";  
94.             mask_div.style.left = x + 'px';  
95.             mask_div.style.top = y + 'px';  
96.             mask_div.style.overflow = "hidden";  
97.             mask_div.style.zIndex = "9999";  
98.             //mask_div.style.border="solid #eee 1px";  
99.             mask_div.style.opacity = defaultSettings.watermark_alpha;  
100.             mask_div.style.fontSize = defaultSettings.watermark_fontsize;  
101.             mask_div.style.fontFamily = defaultSettings.watermark_font;  
102.             mask_div.style.color = defaultSettings.watermark_color;  
103.             mask_div.style.textAlign = "center";  
104.             mask_div.style.width = defaultSettings.watermark_width + 'px';  
105.             mask_div.style.height = defaultSettings.watermark_height + 'px';  
106.             mask_div.style.display = "block";  
107.             oTemp.appendChild(mask_div);  
108.         };  
109.     };  
110.     document.body.appendChild(oTemp);  
111. }