页面打印总结

由于项目需求，需要完成胸卡的打印工作，就是一张图片，放置在一个div中作为背景，然后上面浮动一些字段信息，编辑后。提供打印功能。

打印调用window.print()方法，这个是主要的思路。

接下来就是我要打印的是一个div而非整个页面所以将不需要打印的东西都去掉，通过以下的css来实现。这样页面中除了要打印的div,其他的都添加noPrint样式。

<style type="text/css">
@media print{
	.noPrint{
		display:none;
	}
}
</style>

这样就将打印的主要功能完成了，接下来的一个棘手问题就是图片的打印。

这里必须是将图片作为img上传到页面展示，而不推荐使用background-image来实现，使用background可以实现背景展示，但是当调用print方法时，背景拿不到。

但是img元素应当在div中的底层，添加如下的样式。由于card_box是本系统中默认的打印div的样式，其中有background：#fff，所以z-index设置为0就可以了，

如果设置为负数就看不到了。
<style type="text/css">
.card_box img{ 
	width:100%;
	height:100%;
	z-index:0;
}
</style>

暂时就是这些，希望指正。