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

<!--使用背景图添加水印--><div id="one">     <p>这是一段文字</p> <ul>  <li>这是第1个</li>  <li>这是第2