需求：
1. 打印页面中部分的内容，并为其添加背景水印效果
2. 水印图片只在打印时出现。
3. 要求水印必须可以随着打印内容长度的增长而repeat
4.无法手动去除水印
问题分析：
1. 在此需求的制作过程中，遇到过各种问题，比如，通常各个浏览器会对自带的打印机功能进行手动设置，在打印预览界面可以用户可以手动勾选是否显示背景图片和颜色，这就使得css中的background-image以及background-color属性无法满足效果。
此时，只能使用img标签在页面添加水印。
2. 这时候新的问题又出现了，img标签所添加的图片是不可以repeat，并且如果想img作为背景出现。
处于以上问题，想到可以使用jquery来实现img的repeat，并使用css中的层控制来实现img作为背景在打印信息的下面出现。
实现：
css（使用定位将图片文字按照层级显示）：
.image{// 没有打印时水印图片不显示
display:none;
}
@media print{
.image{//使用相对定位将水印图片层级往下，显示成背景效果
position:relative;
top:0px;
z-index:-100px;
700px;
display: inline;
}
.text{//使用绝对定位将需要打印的内容的层级往上显示，并设置显示的位置
position:absolute;
top:190px;
z-index:100px;
700px;
}
#sub-nav, #header-container, #nav-container, #footer{//将页面不需要打印的部分隐藏
display: none;
}
}
html:
<div class="image" id="a"></div> <div class="text" id="text"> This is messages...... </div>
Jquery（获取text的div区域大小并计算使水印图片按照文字的长度进行repeat）：
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
var conHeight = $("#text").height();
var conWidth = $("#text").width();
var num = Math.ceil(conHeight*conWidth/800/855);
for(i=0;i<num;i++)
$('#a').append('<img src="waterMarkUrl" />');
});
</script>
总结：
在使用定位布局时，需要注意页面布局是否变化，必要时需要清除浮动使页面布局不受影响。