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

Background-color: #f5f5f5 !

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

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

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

删除这个CSS样式因为它覆盖了你的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答案的副本

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

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