CSS @media打印问题与背景颜色;

I'm new here at this company and we have a product that uses miles of css. I'm attempting to make a printable stylesheet for our app but i'm having issues with background-color in @media print...

我是这家公司的新员工，我们有一款使用了好几英里css的产品。我正在尝试为我们的应用制作一个可打印的样式表，但是我在@media print中遇到了背景色的问题……

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

everything else works, i can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question with out more details, I was just curious if anyone had this issue, or something similar, before.

其他的都可以，我可以修改边框，但是背景色不会出现在打印中。现在我明白了，你们可能无法回答我的问题而提供更多的细节，我只是想知道是否有人以前有过类似的问题。

17 个解决方案

#1

182

IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

如果用户的“打印背景色和图像”在他们的打印设置中被关闭，没有CSS会覆盖它，所以一定要考虑到这一点。这是默认设置。

Once that is set so it will print background colours and images, what you have there will work.

一旦设置好，它将打印背景颜色和图像，你所拥有的将会工作。

It is found in different spots. In IE9beta it's found in Print->Page Options under Paper options

它存在于不同的地方。在IE9beta中，它可以在纸质选项下的打印->页面选项中找到

In FireFox it's in Page Setup -> [Format & Options] Tab under Options.

在火狐浏览器中，它在选项栏的> [Format & Options]选项卡中。

#2

164

To enable background printing in Chrome:

使背景印刷在铬:

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

#3

GOT iT - even if the question was "closed" years ago : )
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
(If the PDF-printer output file is to be believed..?)
- Only tested in Chrome + Firefox on Ubuntu...

得到了——即使这个问题在几年前已经“关闭”了:)CSS: box-shadow: inset 0,0 1000px黄金;适用于所有的盒子-包括表格单元格!!(如果PDF-printer输出文件是可信的)-只能在Ubuntu的Chrome + Firefox中进行测试……

#4

Try this, it worked for me on Google Chrome:

试试这个，它在谷歌Chrome上对我有用:

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

#5

-webkit-print-color-adjust: exact; alone is Not enough you have to use !important with the attribute

-webkit-print-color-adjust:准确;单独使用是不够的!属性很重要

this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag

这是我添加后在chrome上打印预览!对每个标签的背景色和颜色都很重要

and this is printing preview on chrome before adding !important

这是在添加之前在chrome上打印预览

now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule

现在，要知道如何注入!对于div的样式很重要，请查看这个答案，我不能用“!”来注入样式!重要”规则

#6

Two solutions that work (on modern Chrome at least - haven't tested beyond):

有两种解决方案(至少在现代Chrome上还没有经过测试):

!important right in the regular css declaration works (not even in the @media print)
!在常规css声明中很重要(甚至在@media print中也没有)
Use svg
使用svg

#7

If you are looking to create "printer friendly" pages, I recommend adding "!important" to your @media print CSS. This encourages most browsers to print your background images, colors, etc.

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

EXAMPLES:

例子:

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

#8

For chrome, I have used something like this and it worked out for me.

对于chrome，我用过类似的东西，它对我很有用。

Within the body tag,

在body标签,

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

Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,

或者对于一个特定的元素，假设你有一个表格，你想填充td i。一个细胞,

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

#9

There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this 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 */
}

Activate it by adding the class to your element:

通过在元素中添加类来激活它:

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

Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.

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

Notice this hack won't work on elements other than display: block; or display: table-cell;, so for example <table class="your-background"> and <tr class="your-background"> won't work.

注意，这个技巧不会对display: block以外的元素起作用;或者显示:table-cell;，例如

和不会起作用。

We use this to get background colors in all browsers (still, IE9+ required).

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

#10

Thought I'd add a recent and 2015 relevant aid from a recent print css experience.

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

Was able to print backgrounds and colors regardless of print dialog box settings.

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

To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.

要做到这一点，我必须结合使用!重要& -webkit-print-color- adjustment:精确!重要的是要让背景和颜色正确地打印出来。

Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:

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

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

And your CSS:

和你的CSS:

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

#11

Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed".

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

The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did... great hack, thank you very much :)

-webkit-print-color-adjust:准确;当然，重要的解决方案是无效的，但是方框阴影:嵌入000 0 1000px黄金;做了……很棒的技巧，非常感谢

#12

In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.

在某些情况下(没有任何内容的块，但是有背景)，可以使用边界来覆盖它，每个块单独使用边界。

For example:

例如:

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

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

#13

Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.

在2016/10之前对Chrome、Firefox、Opera和Edge进行测试和工作。应该可以在任何浏览器上工作，并且应该始终像预期的那样。

Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!

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

Here it is a full printable HTML page for 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>

#14

Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color.

尽管如此，重要的用法通常是不受欢迎的，这是bootstrap中的违规代码。css，防止表行打印为背景色。

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

Let's assume you are trying to style the following HTML:

假设您正在尝试设计以下HTML:

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

To override this CSS, place the following (more specific) rule in your stylesheet:

要覆盖此CSS，请将以下(更具体的)规则放在样式表中:

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

This works because the rule is more specific than the bootstrap default.

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

#15

Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing. This has been very successful for me.

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

#16

You can use the tag canvas and "draw" the background, which work on IE9, Gecko and Webkit.

您可以使用标记画布并“绘制”背景，这可以在IE9、Gecko和Webkit上工作。

#17

If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.

如果你不介意使用图像而不是背景颜色(或者可能是背景颜色的图像)，下面的解决方案对我来说在FireFox、Chrome甚至IE中都是有效的。将图像设置在页面的某个位置，并将其隐藏直到用户打印。

The html on the page with the background image

页面上带有背景图像的html

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

The Css

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

}

#1

182