页面打印时添加背景水印效果

需求：

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>

总结：

在使用定位布局时，需要注意页面布局是否变化，必要时需要清除浮动使页面布局不受影响。

 

 

转载于:https://www.cnblogs.com/emily1130/p/3645327.html