javascript 强制浏览器在 chrome、firefox 上打印背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22376912/
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
Force browsers to print background images on chrome, firefox
提问by Shiva Krishna Bavandla
I have a web page that contains some background images and css colors, but when i print the page using ctrl + pits showing page print preview without css and background colors.
我有一个包含一些背景图像和 css 颜色的网页，但是当我使用ctrl + p它的显示页面打印预览打印页面时，没有 css 和背景颜色。
I have a divelement that has inline style attribute(because the background image of the div will be selected dynamically using for loop in coding) as below
我有一个div具有内联样式属性的元素（因为将在编码中使用 for 循环动态选择 div 的背景图像），如下所示
<div class='assessment' style='background-image: url('/static/images/print_%s.png')' >
<p></p>
<p></p>
</div>
So i head read something herethat we can write print mediacss to make background images and colors visible by default like
所以我在这里读了一些我们可以编写print mediacss 让背景图像和颜色在默认情况下可见的内容，例如
@media print {
.assessment {
visble:visible;
}
}
But i don't know how to write this media css with inline css(style='background-image: url('/static/images/print_%s.png')) that i have in my above div
但我不知道如何使用style='background-image: url('/static/images/print_%s.png')我在上面的 div 中的内联 css( )编写这个媒体 css
So how to write the media css with the inline css to make the background images visible in the print preview by default when some clicks ctrl+p?
那么如何用内联css编写媒体css，让一些点击时默认打印预览中的背景图片可见ctrl+p呢？
回答by Ivaylo Petrov
This answerwill help you. It works for FF and Chrome. First you set !importantto your inline css, like so <div class='assessment' style='background-image: url('/static/images/print_%s.png')!important >. Then in your css file:
这个答案会帮助你。它适用于 FF 和 Chrome。首先你设置!important你的内联 css，就像这样<div class='assessment' style='background-image: url('/static/images/print_%s.png')!important >。然后在你的 css 文件中：
@media print {
-webkit-print-color-adjust: exact;
}
回答by Kheema Pandey
how about using @media printmethod?
使用@media print方法怎么样？
@media print {
body {
content:url(background.jpg);
}
}
While giving the print option there are some setting where you can choose many option to print a background image or not..
在提供打印选项时，有一些设置您可以选择许多选项来打印或不打印背景图像。
