CSS属性是所有你需要它为我工作…在Chrome预览时，你可以选择看到它的BW和颜色(颜色:选项-颜色或黑白)，所以如果你没有这个选项，那么我建议抓住这个Chrome扩展，让你的生活更容易:

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

你在小提琴上添加的网站需要这个在你的媒体打印css(你有它只需要添加它…

媒体打印CSS在body:

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

更新 你的问题是bootstrap。css。它有一个媒体打印CSS以及你做....你去掉它，就会得到颜色....你需要要么做你自己的，要么坚持用bootstrap打印css。

当我点击打印时，我看到颜色.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

CSS属性print-color-adjust: exact;适当的工作。

然而，确保使用正确的CSS进行打印通常是一件棘手的事情。有几件事可以避免你遇到的困难。首先，将打印CSS与屏幕CSS分开。这是通过@media打印和@media屏幕完成的。

通常情况下，仅仅设置一些额外的@media打印CSS是不够的，因为打印时还包括所有其他CSS。在这些情况下，你只需要注意CSS的特殊性，因为打印规则不会自动战胜非打印CSS规则。

在您的情况下，打印颜色调整:精确工作。然而，你的背景颜色和颜色定义正在被其他具有更高特异性的CSS打败。

虽然我不赞成在几乎任何情况下都使用!，但以下定义可以正常工作并暴露问题:

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

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

这里是小提琴(并嵌入便于打印预览)。

你确定这是一个css问题吗?谷歌上有一些关于这个问题的帖子: http://productforums.google.com/forum/ !category-topic /铬/ discuss-chrome / eMlLBcKqd2s

这可能与打印过程有关。在safari(也是webkit)上，在打印机对话框中有一个用于打印背景图像和颜色的复选框。

在@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-color is the absolute fallback and is there for posterity mostly. background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not... Set the box-shadow, if that doesn't work... Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box. Zero out the heigh/width depending on what you're controlling in the border attribute. Font color will default to black unless you use !important Set line-height to 0 to fix for the box not having physical dimension. Make and host your own PNGs :-) If the text in the block needs to wrap, put it in a div and position the div using position:relative; and remove line-height.

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

我只需要在background-color标签上添加!important属性，以便它显示出来，不需要webkit部分:

Background-color: #f5f5f5 !

你的CSS必须是这样的:

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

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}

如果你正在使用bootstrap或任何其他第三方CSS，确保你只在它上面指定媒体屏幕，这样你就可以在你自己的CSS文件中控制打印媒体类型:

<link rel=“stylesheet” media=“screen” href=“”>

在@media print{*，:after，:before ....下的引导css文件中有一个样式}，它具有标记为!important的颜色和背景样式，可以删除任何元素上的任何背景颜色。杀死这两个css，它将工作。

Bootstrap正在执行决定，你不应该在打印中使用任何背景颜色，所以你必须编辑它们的css或有另一个优先级更高的!important样式。bootstrap做得好…

如果你下载Bootstrap时没有“打印媒体样式”选项，你就不会有这个问题，也不需要手动删除Bootstrap .css文件中的“@media Print”代码。

我双重加载我的外部css源文件，并将media="screen"更改为media="print"，我的表的所有边界都显示出来了

试试这个:

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

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

我使用了purgatory101的答案，但很难保持所有的颜色(图标，背景，文本颜色等…)，特别是CSS样式表不能与动态改变DOM元素颜色的库一起使用。因此，这里有一个脚本，可以在打印之前更改元素的样式(background-colour和colour)，并在打印完成后清除样式。避免在@media print样式表中编写大量CSS是很有用的，因为无论页面结构如何，它都可以工作。

有一部分脚本是专门用来保持fontaweesome图标的颜色(或任何使用:before选择器插入彩色内容的元素)。

JSFiddle显示运行中的脚本

兼容性:在Chrome中工作，我没有测试其他浏览器。

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._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

查找图标路径来创建CSS的部分:before elements是这个SO答案的副本

如果背景图形设置被关闭，Chrome将不会在打印时呈现背景色或其他几种样式。

这与css、@media或特异性无关。你也许可以破解它，但最简单的方法让chrome显示背景色和其他图形是正确地选中更多设置下的复选框。

你也可以使用box-shadow属性。

对于那些使用BOOTSTRAP.CSS，这是修复!

我已经尝试了所有的解决方案，但都不管用。直到我发现bootstrap.css有一个超级烦人的@media print，它会重置你所有的颜色，背景色，阴影等等…

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

所以要么从bootstrap。css(或bootstrap。min。css)中删除这个section

或者在你想要打印的页面的css中覆盖这些值

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

如果你正在使用引导。只需在自定义CSS文件中使用此代码。引导删除打印预览中的所有颜色。

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

最好的解决方案，如果你正在使用bootstrap，所以只做一件事，删除@media打印{}所有代码在此。并在打印预览时从更多设置中启用背景图形。

对于IE

如果你使用的是IE，那么去打印预览(右键单击文档->打印预览)，进入设置，有选项“打印背景颜色和图像”，选择该选项并尝试。

你可以使用内联css样式!important。 如。

<p style="background:red!important">ABCD</p>

如果你正在使用nextjs或react，将这个添加到全局css中:

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

这对我很管用。

你可以从bootstrap web下载bootstrap 4 CSS，并查看底部代码 看看代码在哪里

删除这个CSS样式因为它覆盖了你的CSS颜色表样式

我在这里尝试了所有建议的解决方案(以及其他许多问题)，例如applied background-color: #000 !important;无论是在样式表和内联，或设置

@media print {
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

他们甚至把它们结合在一起，但都不起作用。

经过几个小时的研究，没有任何结果，我意识到“错误”丢失的背景颜色只出现在表(th, td)，但其他HTML元素(div，…)或其他CSS属性(border-color，…)仍然有效。

因此，我想出了一个“hack”来包装<th>或<td>内的任何内容与<div>(你可以调整填充，使其显示与先前相同)。

这里我使用React和@material-ui/core的makestyle。

JSX:

<Table bordered>
  <thead className={classes.thead}>
    <tr>
      <th><div>Col 1</div></th>
      <th><div>Col 2</div></th>
      <th><div>Col 3</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className={classes.tdGreen}><div>Row 1 - Col 1</div></td>
      <td><div>Row 1 - Col 2</div></td>
      <td><div>Row 1 - Col 3</div></td>
    </tr>
    <tr>
      <td><div>Row 2 - Col 1</div></td>
      <td className={classes.tdBlue}><div>Row 2 - Col 2</div></td>
      <td><div>Row 2 - Col 3</div></td>
    </tr>
  </tbody>
</Table>

风格:

const useStyles = makeStyles(() => ({
  thead: {
    textAlign: 'center',

    '& th:not(:last-child)': {
      padding: '0',
      '& > div': {
        padding: '.75rem',
        backgroundColor: '#D8D8D8 !important',
      }
    }
  },
  tdGreen: {
    padding: '0 !important',
    '& > div': {
      padding: '.75rem',
      color: 'white',
      backgroundColor: 'green !important',
    }
  },
  tdBlue: {
    padding: '0 !important',
    '& > div': {
      padding: '.75rem',
      color: 'white',
      backgroundColor: 'blue !important',
    }
  }
}));

您可以采用这个想法并将其转换为纯HTML/CSS解决方案。

希望这篇文章能帮助到任何有这个问题的人!