如何在 HTML 中强制打印背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11242991/
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
How to forcefully print background image in HTML?
提问by Shrikant
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
我需要打印上面有几个背景图像的报告页面。但只有这些图像不可打印。这些图像实际上是图形的标志，因此在报告中非常重要。
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
我还有另一个选项可以裁剪它们并作为标签包含在页面中，但这是最后一个选项。因此在此之前我想知道是否有任何方法可以强制打印这些图像？有人可以帮我吗？
回答by daveyfaherty
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
默认情况下，浏览器在打印页面时会忽略背景 css 规则，您无法使用 css 来克服这个问题。
The user will need to change their browser settings.
用户将需要更改他们的浏览器设置。
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
因此，您需要打印的任何图像都应呈现为内嵌图像而不是 css 背景。您可以使用 css 显示仅用于打印的内嵌图像。像这样的东西。
HTML
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
@media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css. The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
使用此代码或类似代码，意味着图像在 html 中使用一次，在 css 中使用一次。html 版本是使用 css 隐藏的，对于打印，它会正常显示。这是一个黑客，但它会做你想要它做的事情。它将打印图像。
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
话虽如此，你正在做的是非常糟糕的做法。任何向用户传达有意义信息的内容都不应单独使用 css 传达。它不仅在语义上不正确，而且使图形对用户不太有用。内嵌图像要好得多，如果可以，这就是您应该使用的。
回答by Hady El-Hady
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
当您将 !important 属性添加到背景图像时，它在 google chrome 中工作，请确保先添加属性并重试，您可以这样做
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
您也可以使用这些有用的打印卷并将其放在 css 文件的末尾
@media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
