html中加水印,html中实现添加水印的功能

最近项目需求中需要在html中添加水印效果，试验了一下几种方法

1、使用背景图添加水印

2、使用定位添加水印

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

CSS:

body{background-color: #eef1f8;}

#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;}

#two{padding: 10px 15px;background-color: #FFFFFF;margin-top: 10px;position: relative;}

#three{padding: 10px 15px;background-color: #FFFFFF;margin-top: 10px;}

#two-bg{position: absolute;top:0;right:0;left:0;z-index: 0;width: 200px;height: 200px;}

#two-bg img{width: 100%;}

HTML

这是一段文字

这是第1个

这是第2个

这是第3个

这是第4个

这是第5个

这是一大段文字照着找着做做做做做做做做做做做做做做做

这是第1个

这是第2个

这是第3个

这是第4个

这是第5个

看看看看扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩

这是第1个

这是第2个

这是第3个

这是第4个

这是第5个

JavaScript

代码来源：http://www.cnblogs.com/GongQi/p/4074609.html

watermark({ watermark_txt: "测试水印" })//传入动态水印内容

function watermark(settings) {

//默认设置</