浏览器打印预览不显示 CSS 背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12722244/
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
Browser print preview not showing CSS backgrounds
提问by Sanjay Developer
My website is working fine but when I click on File > print on browser(its browser print preview) all the CSS is messed and background color is replace with white spaces and not getting logo on preview page.
我的网站工作正常，但是当我单击文件 > 在浏览器上打印（其浏览器打印预览）时，所有 CSS 都被弄乱了，背景颜色被替换为空白，并且在预览页面上没有获得徽标。
So how I create a CSS file for print preview and how I call when user click on print.
那么我如何创建一个用于打印预览的 CSS 文件以及当用户单击打印时我如何调用。
回答by Mr. Alien
You need to provide your markup that for what you are having this error for..
您需要为您遇到此错误的原因提供标记。
Info : Browser default neverprints background color, you need to enablethat option in your browser..
信息：浏览器默认从不打印background color，您需要在浏览器中启用该选项。
Just in case if you are using
以防万一，如果您正在使用
<link rel="stylesheet" type="text/css" href="print.css" media="screen" />
Than replace this with media=screen, printso that it will apply rules to your website as well as printing..
比用media=screen, print它替换它，以便它将规则应用于您的网站以及打印..
<link rel="stylesheet" type="text/css" href="print.css" media="screen, print" />
You can also use print specific stylesheet like this :
您还可以像这样使用打印特定的样式表：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
You can also use print specific @mediaqueries
您还可以使用打印特定@media查询
@media print {
/* Whatever */
}
Last but not the least to enable printing in your browser :
最后但并非最不重要的是在浏览器中启用打印：
Firefox: Click on alt(if your browser menu bar is hidden) - File - Page Setup - Tick Print Background
Firefox：点击alt（如果您的浏览器菜单栏被隐藏）-文件-页面设置-勾选打印背景
Chrome: To enable printing in chrome use this CSS property -webkit-print-color-adjust:exact;
Chrome: 要在 chrome 中启用打印，请使用此 CSS 属性-webkit-print-color-adjust:exact;
回答by Michael Schmidt
Create A Stylesheet For Print
创建用于打印的样式表
<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />
Do not display unnecessary elements in the print version
不要在印刷版中显示不必要的元素
Web visitors print your page because of the content on it, not to see the supporting images on your website. Create a class called no-print and add that class declaration to DIVS, images, and other elements that have no print value:
网络访问者打印您的页面是因为页面上的内容，而不是查看您网站上的支持图像。创建一个名为 no-print 的类并将该类声明添加到 DIVS、图像和其他没有打印值的元素：
.no-print {
display:none;
}
<!-- Example -->
<div id="navigation" class="no-print">
<!-- who needs navigation when you're looking at a printed piece? -->
</div>
Tips
提示
- Avoid Unnecessary HTML Tables
Controlling the content area of your website can be extremely challenging when the page structure is trapped in a table. - Use Page Breaks Page breaks in the browser aren't as reliable as they are in Microsoft Word, especially considering the variable content lengths on dynamically created pages, but when utilized well make all the different in printing your website.
- Size Your Page For Print Obviously your computer monitor can provide a large amount of width to view a page, but I recommend setting the content area width to 600px.
- 避免不必要的 HTML 表格
当页面结构被困在表格中时，控制网站的内容区域可能会极具挑战性。 - 使用分页符 浏览器中的分页符不像在 Microsoft Word 中那样可靠，尤其是考虑到动态创建的页面上的可变内容长度，但是如果使用得当，可以在打印您的网站时完全不同。
- 打印页面大小 显然，您的计算机显示器可以提供大量宽度来查看页面，但我建议将内容区域宽度设置为 600 像素。
written by David Walsh
作者：大卫沃尔什
回答by Zeta
Mr. Alien already answeredwhy you didn't get any background color (this also applies for your background logo). However, you stated that your "CSS is messed".
Alien 先生已经回答了为什么您没有获得任何背景颜色（这也适用于您的背景徽标）。但是，您表示您的“CSS 混乱”。
For HTML pages there's a simple thing to keep in mind: don't print them. At least not your usual, heavily graphic based pages. Have you ever noticed how Google provides a special version of maps if you want to print your route? And almost every other page which provides search results or routes will also provide you a special facility for prints. Even Wikipedia has a printable version of every article. Those provide a very simple layout without unnecessary details as page navigation and background images.
对于 HTML 页面，要记住一件简单的事情：不要打印它们。至少不是您通常的、基于图形的页面。如果您想打印路线，您是否注意到 Google 如何提供特殊版本的地图？几乎所有其他提供搜索结果或路线的页面也将为您提供特殊的打印功能。甚至维基百科也有每篇文章的可打印版本。这些提供了一个非常简单的布局，没有不必要的细节，如页面导航和背景图像。
The reason for this? CSS in print media is a huge mess. Stick to very basic layouts, provide the most necessary information with not too much distracting graphics. And if you really need to provide a printable version of a website prepare a PDF. Everything else is just masochism.
这是什么原因？印刷媒体中的 CSS 是一团糟。坚持非常基本的布局，提供最必要的信息，不要太多分散注意力的图形。如果您确实需要提供网站的可打印版本，请准备 PDF。其他一切都只是受虐狂。
回答by Ghost Answer
Try this, I hope this will help you
试试这个，我希望这会帮助你
In mozilla browser, click file-page setup- Format and options tab Checked the print background option and then OK.
在 mozilla 浏览器中，单击文件页面设置 - 格式和选项选项卡 选中打印背景选项，然后确定。
Now check the print
现在检查打印
