CSS 在 Chrome 中打印背景颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2392366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:39:46  来源:igfitidea点击:

Print Background colours in Chrome

cssgoogle-chromeprinting

提问by Mick

I am trying to print a PHP generated document in chrome, on the browser it looks fine Link to the page I want to printBut my printer will not print any coloured backgrounds, can anyone offer any suggestions please? Can I do this with CSS?

我正在尝试用 chrome 打印 PHP 生成的文档,在浏览器上它看起来不错链接到我想打印的页面但是我的打印机不会打印任何彩色背景,有人可以提供任何建议吗?我可以用 CSS 做到这一点吗?

回答by Gordon

You adjust in the browser, whether the background colors and images are printed. See your browsers printing options.

您在浏览器中调整是否打印背景颜色和图像。查看您的浏览器打印选项。

Google Chrome offers this feature starting from version 26(march 2013).

Google Chrome 从版本 26(2013 年 3 月)开始提供此功能

Also starting from version 17, Chrome allows changing the background print behavior programmatically by using -webkit-print-color-adjust:exact;in the element CSS to print the background.

同样从版本 17 开始,Chrome 允许通过-webkit-print-color-adjust:exact;在元素 CSS 中使用以编程方式更改背景打印行为来打印背景。

回答by nobar

Gordon's answer is great, but for people whose CSS skills are rusty, here's a more complete example.

Gordon 的回答很好,但对于 CSS 技能生疏的人来说,这里有一个更完整的例子。

Put the following in your document's <head>section.

将以下内容放入您的文档<head>部分。

<style type="text/css">
@media print { body { -webkit-print-color-adjust: exact; } }
</style>


By the way, although Chrome/Chromium's print dialog now has a Background graphicscheckbox, it only seems to work if you do not click Print using system dialog(observed with Chromium in Linux).

顺便说一句,虽然 Chrome/Chromium 的打印对话框现在有一个Background graphics复选框,但它似乎只有在您不单击时才起作用Print using system dialog(在 Linux 中使用 Chromium 观察)。

回答by Geoffrey Hale

Chrome > Print (cmd P) > clickMore Settings > Options: checkBackground graphics

Chrome > 打印 ( cmd P) >单击更多设置 > 选项:检查背景图形

Chrome Print Preview

Chrome 打印预览