使用css做水印效果

/*
 * @description添加水印
 * @param {Obj} settings水印配置参数
 */
  function waterMark(markElement) {
	$('#' + markElement.waterMarkId).find('.markElement').remove();
	var settings = {
		waterMarkId:"t1",
		waterMarkContent:"我是水印内容",
		waterMarkX:-10,
		waterMarkY:40,
		waterMarkRows:10,
		waterMarkCols:20,
		waterMarkXSpace:0,
		waterMarkYSpace:0,
		waterMarkColor:'#B0C4DE',
		waterMarkAlpha:0.3,
		waterMarkFontSize:'25px',
		waterMarkFont:'微软雅黑',
		waterMarkWidth:100,
		waterMarkHeight:100,
		waterMarkAngle:15
	};
	if(arguments.length === 1 && typeof arguments[0] === "object" ) {
		var src = arguments[0]||{};
		for(key in src) {
			if(src[key]&&settings[key] && src[key] === settings[key])
				continue;
			else if(src[key])
				settings[key] = src[key];
		}
	}
	var obj = document.getElementById(settings.waterMarkId);
	var tmpObj = document.createDocumentFragment();
	var pageWidth = obj.offsetWidth; 
	var pageHeight = obj.offsetHeight ;
	if (settings.waterMarkCols == 0 || (parseInt(settings.waterMarkX + settings.waterMarkWidth *settings.waterMarkCols + settings.waterMarkXSpace * (settings.waterMarkCols - 1)) > pageWidth)) {
		settings.waterMarkCols = parseInt((pageWidth-settings.waterMarkX+settings.waterMarkXSpace) / (settings.waterMarkWidth + settings.waterMarkXSpace));
		settings.waterMarkXSpace = parseInt((pageWidth - settings.waterMarkX - settings.waterMarkWidth * settings.waterMarkCols) / (settings.waterMarkCols - 1));
	}
	if (settings.waterMarkRows == 0 || (parseInt(settings.waterMarkY + settings.waterMarkHeight * settings.waterMarkRows + settings.waterMarkYSpace * (settings.waterMarkRows - 1)) > pageHeight)) {
		settings.waterMarkRows = parseInt((settings.waterMarkYSpace + pageHeight - settings.waterMarkY) / (settings.waterMarkHeight + settings.waterMarkYSpace));
		settings.waterMarkYSpace = parseInt(((pageHeight - settings.waterMarkY) - settings.waterMarkHeight * settings.waterMarkRows) / (settings.waterMarkRows - 1));
	}
	var x;
	var y;
	settings.waterMarkRows = settings.waterMarkRows == 0 ? 6 : settings.waterMarkRows; 
	for (var i = 0; i < settings.waterMarkRows; i++) {
		y = settings.waterMarkY + (settings.waterMarkYSpace + settings.waterMarkHeight) * i;
		y = isNaN(y) ? 40 : y;
		for (var j = 0; j < settings.waterMarkCols; j++) {
			x = settings.waterMarkX + (settings.waterMarkWidth + settings.waterMarkXSpace) * j;
			var markElement = document.createElement('div');
			markElement.id = 'markElement' + i + j;
			markElement.appendChild(document.createTextNode(settings.waterMarkContent));
			//设置水印div倾斜显示
			markElement.style.webkitTransform = "rotate(-" + settings.waterMarkAngle + "deg)";
			markElement.style.MozTransform = "rotate(-" + settings.waterMarkAngle + "deg)";
			markElement.style.msTransform = "rotate(-" + settings.waterMarkAngle + "deg)";
			markElement.style.OTransform = "rotate(-" + settings.waterMarkAngle + "deg)";
			markElement.style.transform = "rotate(-" + settings.waterMarkAngle + "deg)";
			markElement.style.visibility = "";
			markElement.style.position = "absolute";
			markElement.style.left = x + 'px';
			markElement.style.top = y + 'px';
			markElement.style.overflow = "hidden";
			markElement.style.zIndex = "10";
			markElement.style.opacity = settings.waterMarkAlpha;
			markElement.style.fontSize = settings.waterMarkFontSize;
			markElement.style.fontFamily = settings.waterMarkFont;
			markElement.style.color = settings.waterMarkColor;
			markElement.style.textAlign = "center";
			markElement.style.width = settings.waterMarkWidth + 'px';
			markElement.style.height = settings.waterMarkHeight + 'px';
			markElement.style.display = "block";
			markElement.style.filter = "alpha(opacity="+ settings.waterMarkAlpha*100 +")";
			markElement.setAttribute("class","markElement");
			tmpObj.appendChild(markElement);
		};
	};
	obj.appendChild(tmpObj);
}

使用：

    waterMark({
        waterMarkContent:'我是水印内容',
        waterMarkId:'userTable'//需要做水印的元素的id
    });

也可以结合后台传过来的数据作为水印的内容：

        @RequestMapping(value = "/getShuiYinContent", method = RequestMethod.POST)
	public void getShuiYinContent(HttpServletRequest request, HttpServletResponse response) throws IOException {
		JSONArray arr = new JSONArray();
		response.setCharacterEncoding("UTF-8");
		response.addHeader("Access-Control-Allow-Origin", "*");
		PrintWriter pw = response.getWriter();
		String userName = getCurrentUser(request.getSession()).getRealName();
		arr.add(userName);
		pw.print(arr);
		pw.close();
	}

  $.ajax({
		type: 'post',				
		url:"${baseUrl}/user/getShuiYinContent",
		async:true,
		dataType: 'json',
		success: function(data){		
                waterMark({
                    waterMarkContent : data,
                    waterMarkId : 'userTable'//需要做水印的元素的id
                });
		},
		error: function(data){
			
		}
	});