需求：
1. 打印页面中部分的内容，并为其添加背景水印效果
2. 水印图片只在打印时出现。
3. 要求水印必须可以随着打印内容长度的增长而repeat
4.无法手动去除水印
问题分析：
1. 在此需求的制作过程中，遇到过各种问题，比如，通常各个浏览器会对自带的打印机功能进行手动设置，在打印预览界面可以用户可以手动勾选是否显示背景图片和颜色，这就使得css中的background-image以及background-color属性无法满足效果。
此时，只能使用img标签在页面添加水印。
2. 这时候新的问题又出现了，img标签所添加的图片是不可以repeat，并且如果想img作为背景出现。
处于以上问题，想到可以使用jquery来实现img的repeat，并使用css中的层控制来实现img作为背景在打印信息的下面出现。
实现：
css（使用定位将图片文字按照层级显示）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
.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>
总结：
在使用定位布局时，需要注意页面布局是否变化，必要时需要清除浮动使页面布局不受影响。
原文：http://www.cnblogs.com/emily1130/p/3645327.html