CSS @media 打印背景颜色问题；答案

【问题标题】：CSS @media print issues with background-color;CSS @media 打印背景颜色问题；
【发布时间】：2011-04-23 01:55:36
【问题描述】：

我是这家公司的新人，我们有一个使用数英里 CSS 的产品。我正在尝试为我们的应用程序制作一个可打印的样式表，但我在@media print 中遇到了background-color 的问题。

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

其他一切正常，我可以修改边框等，但background-color 不会出现在打印中。现在我明白了，如果没有更多细节，你们可能无法回答我的问题。我只是好奇之前是否有人遇到过这个问题或类似的问题。

【问题讨论】：

嗯，它通过了 W3C CSS-Validator (jigsaw.w3.org/css-validator)。这很奇怪
这应该不再是问题了。我遇到这个问题是因为我有一个引导页面，并且引导程序有一个 @media print 查询，它从表格中删除背景颜色（例如条纹）。
@MartinThoma 你是如何解决这个问题的？您是否从 boostrap 模板中删除了 CSS？

标签： css media-queries

【解决方案1】：

如果用户在其打印设置中关闭了“打印背景颜色和图像”，则任何 CSS 都不会覆盖它，因此请始终考虑这一点。 这是默认设置。

一旦设置为打印背景颜色和图像，您所拥有的就会起作用。

它出现在不同的地方。在 IE9beta 中，它位于“纸张选项”下的“打印”->“页面选项”

在 FireFox 中，它位于页面设置 -> 选项下的 [格式和选项] 选项卡中。

【讨论】：

太棒了，你为我节省了数小时在这个 CSS 上绞尽脑汁的时间。
使用 Chrome 和 Safari，您可以添加 css 样式“-webkit-print-color-adjust:exact;”到元素强制打印背景颜色和/或图像
@MarcoBettiolo 似乎不适用于最新的 webkit 构建，但是 !important 可以
将 !important 添加到规则中也为我解决了这个问题。
为了扩展这一点，我添加了颜色调整：精确；让FF工作。所以我的完整代码是*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

【解决方案2】：

我发现的最佳“解决方案”是提供一个突出的“打印”按钮或链接，该按钮或链接会弹出一个小对话框，粗体、简短、简洁地解释他们需要调整打印机设置（带有 ABC 123 要点说明）启用背景和图像打印。这对我来说非常成功。

【讨论】：

【解决方案3】：

在 Chrome 中启用后台打印：

body {
  -webkit-print-color-adjust: exact !important;
}

【讨论】：

这似乎解决了我打印具有交替行颜色的表格的问题。
确保您对图像路径使用正确的大小写，因为 Chrome 的打印对话框在第一次尝试时不会加载图像。这只发生在您的背景图像属性的 URL 与物理文件夹名称的大小写不匹配的情况下。（在版本 48.0.2564.109 m 中报告）
Firefox 和 IE 的替代品是什么
给未来时间旅行者的注意事项：您可能想改用color-adjust。
@КонстантинВан 自 2019 年 4 月起，Chrome 不支持它。这是 Firefox 文档。

【解决方案4】：

知道了：

CSS：

box-shadow: inset 0 0 0 1000px gold;

适用于所有框 - 包括表格单元格！！！

（如果相信 PDF 打印机输出文件..？）
仅在 Ubuntu 上的 Chrome + Firefox 中测试...

【讨论】：

您可以使用-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ 添加 IE8 和 IE9 支持如果您希望您的 sprite 图像可见，请使用 img/clip 技术css-tricks.com/css-sprites-with-inline-images，这将为您提供 IE9 和 FF 中的图像（不是IE8）
在普通浏览器中效果很好，但在 IE 中效果不佳，即使有 @evami 的建议。
@woz 我让它在一个使用 IE8/9 的项目中运行。渐变（就像 box-shadow 一样）添加了一个额外的背景元素，该元素不会被强制浏览器重置所消除。你介意分享你的 CSS 吗？
这似乎不适用于最新的 Chrome (60)。
这对我来说在 Chrome 中失败了。我正在使用 69。这表明它自 60 年以来至少已被破坏（根据@swervo 的评论）。

【解决方案5】：

试试这个，它在谷歌浏览器上对我有用：

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

【讨论】：

【解决方案6】：

在某些情况下（没有任何内容但有背景的块）可以使用边框覆盖它，每个块单独使用。

例如：

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

【讨论】：

【解决方案7】：

两种可行的解决方案（至少在现代 Chrome 上 - 尚未经过测试）：

!在常规 css 声明作品中的重要权利（甚至在@media 打印中）
使用 svg

【讨论】：

!important 可以解决所有现代浏览器中的问题，只要启用“打印背景颜色和图像”即可。
!important 如果与 body { -webkit-print-color-adjust:exact; 一起使用，也无需用户干预即可工作。 }（根据上面的评论）
我发现如果我使用 color-adjust 或 webkit 变体，我实际上不需要重要规则。

【解决方案8】：

您可以使用标签canvas 并“绘制”背景，这适用于 IE9、Gecko 和 Webkit。

【讨论】：

【解决方案9】：

还有另一个技巧，您可以在激活其他帖子中提到的打印边框选项。由于边框已打印，因此您可以使用此 hack 模拟纯色背景色：

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

通过将类添加到您的元素来激活它：

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

虽然这需要一些额外的代码和一些额外的注意来使背景颜色可见，但它仍然是我知道的唯一解决方案。

请注意，此 hack 不适用于 display: block; 或 display: table-cell; 以外的元素，因此例如 <table class="your-background"> 和 <tr class="your-background"> 将不起作用。

我们使用它来获取所有浏览器中的背景颜色（仍然需要 IE9+）。

【讨论】：

这是一个疯狂的 hack，但不管打印设置如何，它至少会强制使用某种形式的背景颜色。太棒了，谢谢。

【解决方案10】：

如果您不介意使用图像而不是背景颜色（或者可能是具有背景颜色的图像），那么下面的解决方案在 FireFox、Chrome 甚至 IE 中对我有用，没有任何覆盖。将图像设置在页面上的某处并将其隐藏，直到用户打印。

页面上带有背景图片的html

<img src="someImage.png" class="background-print-img">

CSS

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

【讨论】：

我采用了你的方法并试图让它在 IE11 上工作，但遗憾的是它没有工作。直到我在我的类中的每个属性上添加了一个 !important 值，然后它才开始工作。

【解决方案11】：

如果您希望创建“打印机友好”页面，我建议将“！important”添加到您的@media 打印 CSS。这会鼓励大多数浏览器打印您的背景图片、颜色等。

示例：

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

【讨论】：

【解决方案12】：

我想从最近的打印 css 经验中添加最近和 2015 年的相关帮助。

无论打印对话框设置如何，都能打印背景和颜色。

为此，我必须结合使用 !important 和 -webkit-print-color-adjust:exact !important 以获得正确打印的背景和颜色。

此外，在声明颜色时，我发现最顽固的区域需要直接对您的目标进行定义。例如：

<div class="foo">
 <p class="red">Some text</p>
</div>

还有你的 CSS：

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

【讨论】：

【解决方案13】：

发现这个问题，因为我在尝试从 Google Apps 脚本中的 html 输出生成 PDF 时遇到了类似的问题，其中背景颜色也没有“打印”。

-webkit-print-color-adjust:exact; 和 !important 解决方案当然不起作用，但 box-shadow: inset 0 0 0 1000px gold; 确实...很棒的 hack，非常感谢 :)

【讨论】：

【解决方案14】：

对于 chrome，我使用了类似的东西，它对我有用。

在body标签内，

<body style="-webkit-print-color-adjust: exact;"> </body>

或者对于特定元素，假设您有表格并且想要填充 td 即单元格，

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

【讨论】：

【解决方案15】：

在 2016/10 之前在 Chrome、Firefox、Opera 和 Edge 上测试并运行。应该可以在任何浏览器上运行，并且应该始终按预期显示。

好的，我做了一个小的跨浏览器实验来打印背景颜色。只需复制、粘贴和享受！

这是一个完整的可打印 HTML 页面，用于引导程序：

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

【讨论】：

【解决方案16】：

-webkit-print-color-adjust: exact; 单独is Not enough 您必须使用带有属性的!important

这是在 chrome 上打印预览之后我将!important 添加到每个标签中的每个background-color 和color 属性

这是在 Chrome 上打印预览之前添加!important

现在，要知道如何将inject !important 转换为div 的样式，请查看此答案I'm unable to inject a style with an “!important” rule

【讨论】：

可能是因为您已经有一个@print 样式表来重置背景颜色。
天啊！它正在工作，但这是如何工作的？你能解释一下吗？
这是迄今为止对我有用的唯一解决方案。
...
感谢 Buddy IT 为我工作。非常感谢。

【解决方案17】：

尽管!important 的用法通常不受欢迎，但这是bootstrap.css 中的违规代码，它会阻止使用background-color 打印表格行。

.table td,
.table th {
    background-color: #fff !important;
}

假设您正在尝试设置以下 HTML 的样式：

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

要覆盖此 CSS，请在样式表中放置以下（更具体的）规则：

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

之所以有效，是因为该规则比引导默认值更具体。

【讨论】：

经过数小时的搜索，我找到了这个答案。我进去并消除了 Bootstrap.css 和 WHAM 中的行！可打印背景中的颜色！
谢谢！最后，这是让我启动并运行的答案，但我需要添加：body { -webkit-print-color-adjust:exact !important; }

【解决方案18】：

不要不要在打印样式表中设置background-color。只需在普通的 css 文件中设置属性，它就可以正常工作:)

查看此示例：The Ultimate Print HTML Template with Header & Footer

演示：The Ultimate Print HTML Template with Header & Footer Demo

【讨论】：

【解决方案19】：

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

适用于 Chrome 和 Edge

【讨论】：

【解决方案20】：

    body{
        background-color: #E5FFE5;
    }
    .bg_print{
       border-bottom: 30px solid #FFCC33;
    }
    .orange_bg_print_content{
        margin-top: -25px;
        padding: 0 10px;
    }

    <div class="bg_print">
    </div>
    <div class="orange_bg_print_content">
        My Content With Background!
    </div>

在 Chrome 和 Firefox 和 Edge 中测试并运行...

【讨论】：

【解决方案21】：

我刚刚将此 sn-p 添加到打印媒体查询中，并且所有样式都按预期应用：

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

【讨论】：

【解决方案22】：

* {
  -webkit-print-color-adjust: exact;
}

另外，启用 > 从 > Inspact > 更多工具 > 渲染中模拟 CSS 媒体。非常详细的步骤可以在here找到。

【讨论】：