问题重现
为了清晰的看到问题,我新写了一个空白的html,然后对body样式进行了如下设置:
①高度2000px
②背景图 在y轴循环填满整个高度
body {
height:2000px;
background: url("images/noBallFriends.png") repeat-y;
}
然后调用window.print()打印当前页面,可以看到他是这样子的:
由于2000px的高度比较高,这时它会自动分两页去打印,第一页看上去没什么问题,但第二页:
没错,背景图没了。
怎么回事?我辣么大一张背景图呢?
接下来,我无意中滑了一下滚动条,然后F5刷新重新调window.print()。结果:
第一页:
第二页:
可以看到正好是我当前屏幕区域才有背景图:
我缓缓打出了一个?
解决方法
我在body里定义了一个div,让它的高度和body一致,把背景图放在这个div里:
body {
height:2000px;
}
.container{
background: url("images/noBallFriends.png") repeat-y;
height: 100%;
}
页面结构是这样的:
<body>
<div class="container"></div>
</body>
刷新页面,可以看到,无论当前屏幕区域是哪块,打印的第一第二页始终都有背景图:
关于-webkit-print-color-adjust: exact失效
更多设置里面那个背景图形的选项,如果不勾是打不出来背景图的。但是呢,我们可以给body样式加一行代码去让它在不勾的时候进行打印:
body {
height:2000px;
-webkit-print-color-adjust: exact;/*就是这一句*/
}
.container{
background: url("images/noBallFriends.png") repeat-y;
height: 100%;
}
可以看到效果:
但如果我用最开始那种写法去写:
body {
height:2000px;
background: url("images/noBallFriends.png") repeat-y;
-webkit-print-color-adjust: exact;/*就是这一句*/
}
可以看到,只要我不勾,他就打不出来:
也就是-webkit-print-color-adjust: exact失效了。
总结
当我想要打印整个页面时,如果需要给整个body加上背景图(比如做个水印处理等),不要直接把背景图写在body的样式里,而要在body里写一个和它等高的div,把背景图写在它的样式里。
存疑点
本文虽然找到了出问题的代码,也想到了解决问题的方法,却没有找到产生这个问题的原因。
因此在这里先记录自己遇到的问题,并为同样碰到这个问题又不知道自己哪里写错了的人提供我的方法,来解决他们的燃眉之急。后续我会继续跟进追究原因,如果有大佬知道是什么情况,请在评论指导我一下,十分感激!