在@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.

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

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

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

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

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

这对我很管用。

对于IE

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

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

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

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;
    }
}

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