需求：
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;
width:700px;
display: inline;
}
.text{//使用絕對定位將需要打印的內容的層級往上顯示，並設置顯示的位置
position:absolute;
top:190px;
z-index:100px;
width: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>
總結：
在使用定位布局時，需要注意頁面布局是否變化，必要時需要清除浮動使頁面布局不受影響。