如果你留意过网页的打印模式，也就是在网页窗口按下Ctrl+P开启打印对话框预览网页，你会发现有很多的页面区块在打印模式下是不显示图片和颜色的，比如这样：

上图中，可以看到不仅仅是顶部banner的背景图片没有显示，连按钮的颜色都不显示。这是因为这些元素都是背景着色，无论是背景图片还是背景颜色，打印机会默认忽略这些着色部位以省油墨。用img标签的图片则通常不受影响（也有例外，这个文末再说）。

我们可以这样设置打印，强制开启如图的选项，这样这些着色点就可以正常打印出来了。

通常我们觉得可以通过CSS的media query来为这些区块和按钮单独设置打印颜色，以强制开启它们的打印着色，比如这样：

@media print {
	.banner { background:url(path/abc.jpg) no-repeat center cover; }
	.button { background: red; }
}

然而实际上，如果不开启上面图2的选项，这些样式设置没有卵用。

查了一下谷歌，发现渲染打印颜色，有一条CSS可以解决这个问题

element{
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

目前兼容性不错，不兼容IE11，但在Edge下亲测有效。

你可以为某些页面元素添加这条属性，确保它的背景色能被默认打印出来。我们也可以粗暴地让整个页面文档强制着色打印，像这样：

body {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

print-color-adjust这条样式的默认属性是economy，可以按字面理解为经济模式，所以打印机都不显示这些颜色，而exact属性则命令打印机不惜油墨把所有颜色都打印出来。

回到本文开头提到的img标签无论是在economy还是exact模式下都会打印，但如果你的图片上层有其他元素通过定位遮盖了这张图片，那么即使遮盖图层是透明的，下面的img标签图片照样是默认不打印的。这个时候，你又可以给图片和遮盖层共同的父级元素添加print-color-adjust: exact 来强制图片打印。

总结：你当然可以通过这样一条样式强制整个文档都用真色打印，但大部分时候这样都很费墨，没有必要。所以我们还是应该通过指定一些特别需要着色的元素赋予这条CSS，来控制打印的效果。在很长一段时间内我自己也没有好好检查过每个页面的打印效果，因为有这种要求的客户非常少见。但随着自己对CSS知识的拓宽，以后做的页面就要注意这些在屏幕以外可能发生的细枝末节了。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/3291.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。