一行简单的CSS强制开启打印模式下的背景图片、背景颜色渲染

本站所有文章均为博主人工写作,绝无AI辅助成分,请放心参阅。

如果你留意过网页的打印模式,也就是在网页窗口按下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 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注