打印预览中不显示背景颜色

我正在尝试打印一个页面。 在那个页面上，我给了一个表格一个背景颜色。 当我在chrome中查看打印预览时，它不会考虑背景颜色属性…

所以我尝试了这个属性：

-webkit-print-color-adjust: exact; 

但仍然没有显示颜色。

http://jsfiddle.net/TbrtD/

 .vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } <div class="bs-docs-example" id="soTable" style="padding-top: 10px;"> <table class="table" style="margin-bottom: 0px;"> <thead> <tr class="vendorListHeading" style=""> <th>Date</th> <th>PO Number</th> <th>Term</th> <th>Tax</th> <th>Quote Number</th> <th>Status</th> <th>Account Mgr</th> <th>Shipping Method</th> <th>Shipping Account</th> <th style="width: 184px;">QA</th> <th id="referenceSO">Reference</th> <th id="referenceSO" style="width: 146px;">End-User Name</th> <th id="referenceSO" style="width: 118px;">End-User's PO</th> <th id="referenceSO" style="width: 148px;">Tracking Number</th> </tr> </thead> <tbody> <tr class=""> <td>22</td> <td>20130000</td> <td>Jim B.</td> <td>22</td> <td>510 xxx yyyy</td> <td>[e-mail]</td> <td>PDF</td> <td>12/23/2012</td> <td>Approved</td> <td>PDF</td> <td id="referenceSO">12/23/2012</td> <td id="referenceSO">Approved</td> </tr> </tbody> </table> </div> 

Answer 1

Chrome的CSS属性“-webkit-print-color-adjust：exact;” 适当地工作。

但是，确保你有正确的打印css往往是棘手的。 有几件事情可以做，以避免您遇到的困难。 首先，从你的屏幕CSS分离所有的打印CSS。 这是通过@media print和@media屏幕完成的。

通常只需要设置一些额外的@media print css是不够的，因为在打印时还包含了所有其他的css。 在这些情况下，你只需要知道css的特殊性，因为打印规则不会自动赢得非打印的CSS规则。

在你的情况下，-webkit-print-color-adjust：exact正在工作。 但是，你的背景颜色和颜色定义正在被更高特异性的其他CSS打败。

虽然我不赞同使用！在任何情况下都很重要，但下面的定义正确地工作并揭露了这个问题：

 @media print { tr.vendorListHeading { background-color: #1a4567 !important; -webkit-print-color-adjust: exact; }} @media print { .vendorListHeading th { color: white !important; }} 

这里是小提琴 （和embedded式便于打印预览）

Answer 2

该CSS属性是所有你需要它适用于我…在Chrome中预览时，您可以select看BW和颜色（ 颜色：选项 – 颜色或黑白 ），所以如果你没有这个选项，那么我build议抓住这个Chrome扩展，让你的生活更轻松：

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

您在小提琴上添加的网站需要您的媒体打印CSS（你只需要添加它…

媒体在正文中打印CSS：

 @media print { body {-webkit-print-color-adjust: exact;} } 

更新确定，所以你的问题是bootstrap.css …它有一个媒体打印的CSS以及你做….你删除，这应该给你的颜色….你需要做自己的或坚持bootstraps打印CSS。

当我点击打印在这个我看到颜色…. http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Answer 3

我只需要将!important属性添加到background-color标签中，以便显示它，不需要webkit部件：

background-color: #f5f5f5 !important;

Answer 4

如果您正在使用引导程序或任何其他第三方CSS，请确保仅在其上指定媒体屏幕，以便您可以在自己的CSS文件中控制打印媒体types：

 <link rel="stylesheet" media="screen" href=""> 

Answer 5

你确定这是一个CSS问题？ 在这个问题上有一些关于谷歌的post： http : //productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

这可能与打印过程有关。 在safari上，也是webkit，在打印机对话框中有一个checkbox来打印背景图像和颜色。

Answer 6

在@media打印样式表中使用以下内容。

 h1 { background-color:#404040; background-image:url("img/404040.png"); background-repeat:repeat; box-shadow: inset 0 0 0 1000px #404040; border:30px solid #404040; height:0; width:100%; color:#FFFFFF !important; margin:0 -20px; line-height:0px; } 

这里有几件事要注意：

• 背景颜色是绝对的后备，主要是后代。
• background-image使用＃404040制作成PNG的1px x 1px像素。 如果用户启用了图像，则可能会工作，如果没有…
• 设置框阴影，如果这不起作用…
• 边框= 1/2所需的高度和/或框宽，固体，颜色。 在上面的例子中，我想要一个60px的高度框。
• 根据您在边界属性中控制的内容，将高度/宽度清零。
• 字体颜色将默认为黑色，除非您使用！重要
• 将行高设置为0，以修复不具有物理尺寸的框。
• 制作和托pipe您自己的PNG 🙂
• 如果块中的文本需要打包，则将其放在一个div中，并使用位置position：relative; 并删除行高。

看我的小提琴更详细的演示。

Answer 7

你的CSS必须是这样的：

 @media print { body { -webkit-print-color-adjust: exact; } } .vendorListHeading th { background-color: #1a4567 !important; color: white !important; } 

Answer 8

在@media print {*：：after，：before ….}之后的bootstrap css文件中有一种样式，其颜色和背景样式被标记为“重要的”，它将删除任何元素上的任何背景颜色。 杀死这两个CSS，它会工作。

Bootstrap正在执行决定，你不应该有打印任何背景颜色，所以你必须编辑他们的CSS或有另一个更高的优先重要的风格。 干得好工作…

Answer 9

如果closures背景graphics设置，Chrome将不会呈现背景色或其他几种样式。

这与CSS，@media或特定性无关。 你可能会破解它，但最简单的方法来获得铬显示背景颜色和其他graphics是正确检查此更多设置下的checkbox。

Answer 10

我用purgatory101的答案，但保持所有的颜色（图标，背景，文字颜色等），特别是CSS样式不能用于dynamic更改DOM元素的颜色的库使用麻烦。 因此，这是一个脚本，在打印之前更改元素的样式（ background-colour和colour ），并在完成打印后清除样式。 避免在@media print样式表中写很多CSS，因为它可以工作在任何页面结构中。

有一部分脚本专门用来保持FontAwesome图标的颜色（或任何使用:beforeselect器插入彩色内容的元素）。

JSFiddle显示脚本正在运行

兼容性：适用于Chrome，我没有testing其他浏览器。

 function setColors(selector) { var elements = $(selector); for (var i = 0; i < elements.length; i++) { var eltBackground = $(elements[i]).css('background-color'); var eltColor = $(elements[i]).css('color'); var elementStyle = elements[i].style; if (eltBackground) { elementStyle.oldBackgroundColor = { value: elementStyle.backgroundColor, importance: elementStyle.getPropertyPriority('background-color'), }; elementStyle.setProperty('background-color', eltBackground, 'important'); } if (eltColor) { elementStyle.oldColor = { value: elementStyle.color, importance: elementStyle.getPropertyPriority('color'), }; elementStyle.setProperty('color', eltColor, 'important'); } } } function resetColors(selector) { var elements = $(selector); for (var i = 0; i < elements.length; i++) { var elementStyle = elements[i].style; if (elementStyle.oldBackgroundColor) { elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance); delete elementStyle.oldBackgroundColor; } else { elementStyle.setProperty('background-color', '', ''); } if (elementStyle.oldColor) { elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance); delete elementStyle.oldColor; } else { elementStyle.setProperty('color', '', ''); } } } function setIconColors(icons) { var css = ''; $(icons).each(function (k, elt) { var selector = $(elt) .parents() .map(function () { return this.tagName; }) .get() .reverse() .concat([this.nodeName]) .join('>'); var id = $(elt).attr('id'); if (id) { selector += '#' + id; } var classNames = $(elt).attr('class'); if (classNames) { selector += '.' + $.trim(classNames).replace(/\s/gi, '.'); } css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }'; }); $('head').append('<style id="print-icons-style">' + css + '</style>'); } function resetIconColors() { $('#print-icons-style').remove(); } 

然后修改window.print函数，使之在打印之前设置样式，之后重新设置。

 var window._originalPrint = window.print; window.print = function() { setColors('body *'); setIconColors('body .fa'); window._originalPrint(); setTimeout(function () { resetColors('body *'); resetIconColors(); }, 100); } 

find图标path的部分为：在元素之前创buildCSS是来自这个SO答案的副本

Answer 11

如果您在没有“打印介质样式”选项的情况下下载Bootstrap，则不会出现此问题，也不必在bootstrap.css文件中手动删除“@media print”代码。

Answer 12

我加载我的外部CSS源文件，并将媒体=“屏幕”更改为媒体=“打印”，我的表的所有边界都显示

尝试这个 ：

 <link rel="stylesheet" media="print" href="bootstrap.css" /> <link rel="stylesheet" media="screen" href="bootstrap.css" />