解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题

问题重现

为了清晰的看到问题,我新写了一个空白的html,然后对body样式进行了如下设置:
①高度2000px
②背景图 在y轴循环填满整个高度

body {
     
	height:2000px;
	background: url("images/noBallFriends.png") repeat-y;
}

然后调用window.print()打印当前页面,可以看到他是这样子的:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第1张图片
由于2000px的高度比较高,这时它会自动分两页去打印,第一页看上去没什么问题,但第二页:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第2张图片
没错,背景图没了。

怎么回事?我辣么大一张背景图呢?

接下来,我无意中滑了一下滚动条,然后F5刷新重新调window.print()。结果:

第一页:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第3张图片
第二页:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第4张图片
可以看到正好是我当前屏幕区域才有背景图:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第5张图片
我缓缓打出了一个?

解决方法

我在body里定义了一个div,让它的高度和body一致,把背景图放在这个div里:

 body {
     
	height:2000px;
 }
.container{
     
	background: url("images/noBallFriends.png") repeat-y;
	height: 100%;
 }

页面结构是这样的:

<body>
  <div class="container"></div>
</body>

刷新页面,可以看到,无论当前屏幕区域是哪块,打印的第一第二页始终都有背景图:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第6张图片
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第7张图片

关于-webkit-print-color-adjust: exact失效

更多设置里面那个背景图形的选项,如果不勾是打不出来背景图的。但是呢,我们可以给body样式加一行代码去让它在不勾的时候进行打印:

body {
     
	height:2000px;
	-webkit-print-color-adjust: exact;/*就是这一句*/
}
.container{
     
	background: url("images/noBallFriends.png") repeat-y;
	height: 100%;
}

可以看到效果:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第8张图片
但如果我用最开始那种写法去写:

body {
     
	height:2000px;
	background: url("images/noBallFriends.png") repeat-y;
	-webkit-print-color-adjust: exact;/*就是这一句*/
}

可以看到,只要我不勾,他就打不出来:
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第9张图片
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题_第10张图片
也就是-webkit-print-color-adjust: exact失效了。

总结

当我想要打印整个页面时,如果需要给整个body加上背景图(比如做个水印处理等),不要直接把背景图写在body的样式里,而要在body里写一个和它等高的div,把背景图写在它的样式里。

存疑点

本文虽然找到了出问题的代码,也想到了解决问题的方法,却没有找到产生这个问题的原因。

因此在这里先记录自己遇到的问题,并为同样碰到这个问题又不知道自己哪里写错了的人提供我的方法,来解决他们的燃眉之急。后续我会继续跟进追究原因,如果有大佬知道是什么情况,请在评论指导我一下,十分感激!

你可能感兴趣的:(css,css,前端)