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

最新推荐文章于 2024-07-09 11:25:19 发布

姜雪辞

最新推荐文章于 2024-07-09 11:25:19 发布

阅读量4k

点赞数 2

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36523214/article/details/107083071

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题重现

为了清晰的看到问题，我新写了一个空白的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，把背景图写在它的样式里。

存疑点

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

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

姜雪辞

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
解决调用window.print时，因页面较长自动分成两页后只有第一页有背景图，第二页没有背景图，以及-webkit-print-color-adjust: exact失效的问题

问题重现为了清晰的看到问题，我新写了一个空白的html，然后对body样式进行了如下设置：①高度2000px②背景图在y轴循环填满整个高度body { height:2000px; background: url("images/noBallFriends.png") repeat-y;}然后调用window.print()打印当前页面，可以看到他是这样子的：由于2000px的高度比较高，这时它会自动分两页去打印，第一页看上去没什么问题，但第二页：没错，背景图没了。怎么回事？我
复制链接

扫一扫

专栏目录