Fomly

Aug 29

Print Watermarks with CSS

Link:Print Watermarks with CSS

通过CSS来控制打印时候水印，作者不是通过把水印作为背景来打印，因为只有在打印的时候，特别设置了打印背景才会打印出水印。所以作者直接把水印放在一个DIV里面，通过定义外链CSS的media来实现的.在网页显示的时候，把水印DIV设置为Display:none;而在用于打印的CSS里（即在media=print的外链CSS里），调整DIV层的位置来实现。同时还利用CSS 的fixed position，使打印的每页里都出现水印。
这是用于打印的CSS里定义的水印样式片段，为了兼容多种浏览器，用了许多CSS hacks

div.watermark{
display:block;
position:fixed;
z-index:-1;
width:100%;
height:100%;
}
div.content > *:first-child,x:-moz-any-link{margin-top:0;}/* ff only */
div.watermark,x:-moz-any-link{z-index:auto;}/* ff only */
div.watermark,x:-moz-any-link,x:default{z-index:-1;}/* ff3 only */

@media all and (min-width: 0px){div.watermark{width:8.5in;}} /* opera only */

div.watermark div{
position:absolute;
left:0;
width:99%;
}