浏览器打印预览不显示CSS背景

Question

我的网站工作正常，但当我点击文件>在浏览器上打印（它的浏览器打印预览）所有的CSS都被搞乱了，背景颜色被替换为空白而没有获得标志在预览页面上。

因此，我如何创建一个用于打印预览的CSS文件，以及当用户单击打印时如何调用。

Answer 1

您需要提供您的标记，对您有此错误..

信息的内容：浏览器的默认从未打印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 */ 
} 

末但不是至少能够在您的浏览器中启用打印：

火狐：点击Alt键（如果您的浏览器菜单栏被隐藏） - 文件 - 页面设置 - 勾选打印背景

铬：为了使印刷在Chrome中使用此CSS属性-webkit-print-color-adjust:exact;

Answer 2

尝试这一点，我希望这会帮助你

在Mozilla浏览器，点击文件 - 页面设置 - 格式和选项选项卡 经过打印背景选项，然后单击确定。

现在检查打印

Answer 3

Mr. Alien already answered你为什么没有得到任何背景色（这也适用于你的背景标志）。然而，你说你的“CSS是混乱的”。

对于HTML页面，请记住一件简单的事情：不要打印它们。至少不是你平常的，基于图形的页面。你有没有注意到，如果你想打印你的路线，谷歌是如何提供特殊版本的地图？几乎所有提供搜索结果或路线的其他页面也将为您提供特别的印刷设施。甚至维基百科都有每篇文章的可打印版本。这些提供了非常简单的布局，没有不必要的细节，如页面导航和背景图像

原因是什么？ CSS in print media is a huge mess。坚持非常基本的布局，提供最多的必要信息，不要过分分散图形。如果您确实需要提供可打印版本的网站，请准备PDF。其他一切都只是受虐狂。

Answer 4

创建样式打印

<!-- 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" /> 

不显示在打印版本不必要的元素

网站访问者打印页面，因为它的内容，不是看在你的网站上的支持图像。创建一个类叫做无打印和类声明添加到没有印刷价值DIVS，图像和其他元素：

.no-print { 
    display:none; 
} 

---

<!-- Example --> 
<div id="navigation" class="no-print"> 
    <!-- who needs navigation when you're looking at a printed piece? --> 
</div> 

提示

• 避免不必要的HTML表
  当页面结构被困在表格中时，控制网站的内容区域可能会非常具有挑战性。
• 使用分页符 浏览器中的分页符不如Microsoft Word中的分页符可靠，特别是考虑到动态创建的页面上的可变内容长度，但使用得当时可以使打印网站时的所有不同。
• 尺寸您的打印页面 显然，您的计算机显示器可以提供大量的宽度来查看页面，但我建议将内容区域宽度设置为600px。

通过David Walsh