我的网站运行良好，但是当我点击 File > 在浏览器上打印（其浏览器打印预览）时，所有的 CSS 都被弄乱了，背景颜色被替换为空白，并且在预览时没有获得徽标页。
那么我如何为打印预览创建一个 CSS 文件，以及当用户点击打印时我如何调用。
【问题讨论】：
background: 属性以避免用户在背景颜色和图稿上浪费墨水/墨粉。在浏览器的选项区域中，您会找到一种禁用此功能的方法。但是，您不能假设您的打印样式表 (@media) 会覆盖浏览器的设置。
您需要为您遇到此错误的原因提供您的标记..
信息：浏览器默认从不打印background color，您需要在浏览器中启用该选项..
以防万一你正在使用
<link rel="stylesheet" type="text/css" href="print.css" media="screen" />
将其替换为 media=screen, print 以便它将规则应用于您的网站以及打印..
<link rel="stylesheet" type="text/css" href="print.css" media="screen, print" />
您也可以像这样使用打印特定样式表：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
您还可以使用打印特定的@media 查询
@media print {
/* Whatever */
}
最后但并非最不重要的一点是在浏览器中启用打印：
Firefox：点击alt（如果您的浏览器菜单栏被隐藏）-文件-页面设置-勾选打印背景
Chrome : 要在 chrome 中启用打印，请使用此 CSS 属性 -webkit-print-color-adjust:exact;
【讨论】：
<!-- 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" />
网络访问者打印您的页面是因为其中的内容，而不是查看您网站上的支持图像。创建一个名为 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>
【讨论】：
Mr. Alien already answered为什么你没有得到任何背景颜色（这也适用于你的背景标志）。但是，您说您的“CSS 混乱”。
对于 HTML 页面，请牢记一件简单的事情：不要打印它们。至少不是你通常的、大量基于图形的页面。如果您想打印路线，您是否注意到 Google 如何提供特殊版本的地图？几乎所有其他提供搜索结果或路线的页面也将为您提供特殊的打印功能。甚至维基百科也有每篇文章的可打印版本。这些提供了一个非常简单的布局，没有页面导航和背景图像等不必要的细节。
这是什么原因？ CSS in print media is a huge mess。坚持非常基本的布局，提供最必要的信息，不要过多分散注意力的图形。如果您确实需要提供网站的可打印版本，请准备 PDF。其他一切都只是自虐。
【讨论】：
试试这个，希望对你有帮助
在 mozilla 浏览器中，单击文件页面设置-格式和选项选项卡 检查打印背景选项，然后确定。
现在检查打印
【讨论】：