Question

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

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

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

Answer 1

在Chrome中启用后台打印：

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

Answer 2

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

一旦设置了它就会打印出背景颜色和图像，你所拥有的就会有效。

它存在于不同的地方。在IE9beta中，可以在Paper选项

下的Print-＆gt; Page Options中找到它

在FireFox中，它位于页面设置中 - ＆gt; [格式＆amp;选项]选项卡下的选项卡。

Answer 3

GOT iT - 即使问题在几年前“关闭”了:)） CSS： box-shadow：inset 0 0 0 1000px gold;
适用于所有包装盒 - 包括台式电池!!!
（如果要相信PDF打印机输出文件..？）
- 仅在Ubuntu的Chrome + Firefox中测试过...

Answer 4

试试这个，它在Google Chrome上对我有用：

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

Answer 5

-webkit-print-color-adjust: exact; 单独is Not enough 您必须将!important与属性

一起使用

这是在chrome 之后打印预览我在每个标记中为每个!important和background-color attrubute添加了color

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

现在，要了解inject !important如何使用div的风格，请查看此答案I'm unable to inject a style with an “!important” rule

Answer 6

两种有效的解决方案（至少在现代Chrome上尚未测试过）：

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

Answer 7

如果您希望创建＆＃34;打印机友好＆＃34;页面，我建议添加＆＃34;！important＆＃34;到你的@media打印CSS。这鼓励大多数浏览器打印背景图像，颜色等。

实施例

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

Answer 8

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

.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">无法正常工作。< / p>

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

Answer 9

对于chrome，我使用过这样的东西，它对我有用。

在body标签内

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

或者对于某个特定元素，让我们说如果你有一个表并且你想填写一个td，即一个单元格，

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

Answer 10

尽管!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默认值更具体。

Answer 11

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

-webkit-print-color-adjust:exact;和!important解决方案当然没有用，但是box-shadow: inset 0 0 0 1000px gold;做了......非常好的黑客，非常感谢你：）

Answer 12

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

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

要做到这一点，我必须结合使用 ！important ＆amp; -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 */

Answer 13

我发现最好的“解决方案”是提供一个突出的“打印”按钮或链接，弹出一个小的对话框，大胆，简洁，简洁地解释他们需要调整打印机设置（使用ABC 123项目符号点指令）启用背景和图像打印。这对我来说非常成功。

Answer 14

对于 Chrome::::::::::::::::::

Ctrl+P => 选择 Click On More Settings => 在选项菜单中选择背景和图形选项

                      :) Will Work

**为什么它不起作用！原因：**Chrome 浏览器启用了字体和标题

一般情况:::::

当你不需要手动开启这个选项时。在 CSS 中输入：::::

-webkit-print-color-adjust:exact !important;

:)作品

Answer 15

到2016/10年，对Chrome，Firefox，Opera和Edge进行了

经过测试和运作。应该可以在任何浏览器上运行，并且应该始终按预期运行。

好的，我做了一些用于打印背景颜色的跨浏览器实验。只需复制，粘贴＆amp;享受！

这是bootstrap的完整可打印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>

Answer 16

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

例如：

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

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

Answer 17

如果你不介意使用图像而不是背景颜色（或者可能是带有背景颜色的图像），下面的解决方案对我来说在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;
    }

}

Answer 18

您可以使用标记canvas和“绘制”背景，它适用于IE9，Gecko和Webkit。

Answer 19

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

请查看以下示例：The Ultimate Print HTML Template with Header & Footer

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

Answer 20

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中工作

Answer 21

    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 中测试和工作...

Answer 22

我刚刚将此代码段添加到印刷媒体查询中，并且所有样式都按预期应用：

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

CSS @media打印背景色问题;

22 个答案: