CSS @media打印背景色问题；

176

我在这家公司是新来的，我们有一款使用CSS的产品。我正在尝试为我们的应用制作可打印的样式表，但是background-colorin 中存在问题@media print。

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

其他所有内容都可以使用，我可以修改边框等，但background-color不会在打印中出现。现在，我了解到，如果没有更多详细信息，可能所有人都无法回答我的问题。我只是想知道以前是否有人遇到过此问题或类似问题。

css media-queries

— 韦斯顿·沃森
source

好吧，它通过了W3C CSS-Validator（jigsaw.w3.org/css-validator）。这是奇怪

— 后藤

这不再是问题。我之所以遇到这个问题，是因为我有一个引导页面，并且引导具有一个@media print查询，该查询从表中删除了背景色（例如，条纹）。

— 马丁·托马

@MartinThoma您如何解决此问题？您是否从模板的boostrap中删除了CSS？

— EduLopez

242

如果用户在其打印设置中关闭了“打印背景颜色和图像”，则没有CSS会覆盖它，因此请务必加以说明。这是默认设置。

一旦设置好，它将打印背景颜色和图像，那么您所拥有的将起作用。

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

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

— 瑞安·特尼尔（Ryan Ternier）
source

10

太好了，您只是节省了我数小时的时间来花时间在此CSS上。

— 韦斯顿沃森

162

借助Chrome和Safari，您可以添加CSS样式“ -webkit-print-color-adjust：精确；”。强制打印背景颜色和/或图像的元素

— Marco Bettiolo 2012年

11

@MarcoBettiolo似乎无法在最新版的Webkit上运行，但重要！

— Hedde van der Heide 2015年

2

在规则中添加！important也可以为我解决。

— Thiago Duarte

14

为了对此进行扩展，我添加了颜色调整：为FF工作。所以我的完整代码是*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

— BitBug

250

要在Chrome中启用后台打印：

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

— 机器人
source

7

这似乎已经解决了我用交替行颜色打印表格的问题。

— Victor J. Garcia

确保您在图像路径上使用正确的大小写，因为Chrome的“打印”对话框不会在第一次尝试时加载图像。仅当您的背景图像属性的URL与物理文件夹名称的大小写不匹配时，才会发生这种情况。（在版本48.0.2564.109 m中报告）

— MPaul

3

什么是firefox和IE中的替代者

— Shan Khan

5

未来旅行者的注意事项：您可能想color-adjust改用。

— КонстантинВан

@КонстантинВан，直到2019年4月，Chrome均不支持。这是Firefox文档。

— 托马斯

82

得到它了：

CSS：

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

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

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

— T4NK3R
source

5

您可以添加IE8和IE9支持，

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */

如果您希望显示精灵图片，请使用img / clip技术css-tricks.com/css-sprites-with-inline-images，它将为您提供IE9和FF中的图片（而不是IE8）

— emik 2013年

2

即使在@evami的建议下，在普通的浏览器中也能很好地工作，但在IE中却不能。

— woz 2013年

@woz我让它在IE8 / 9的项目中起作用。渐变（就像框阴影一样）添加了一个额外的背景元素，该元素不能通过强制浏览器重置来消除。您愿意分享您的CSS吗？

— emik 2013年

2

这似乎不适用于最新的Chrome（60）。

— swervo

1

在Chrome中，这对我来说失败了。我使用的是69。这表明它至少从60开始就被破坏了（根据@swervo的评论）。

— iconoclast

34

尝试一下，它在Google Chrome上对我有用：

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

— 马克斯
source

22

-webkit-print-color-adjust: exact; 一个人is Not enough 就必须使用!important该属性

这是我添加到每个标签并在每个标签中添加标签后在chrome上打印预览的结果!importantbackground-colorcolor

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

现在，要知道如何设置inject !importantdiv的样式，请查看此答案，我无法使用“！important”规则注入样式

— Basheer AL-MOMANI
source

可能是因为您已经有一个@print样式表，用于重置背景色。

— Niccolo M.

我的天啊！它正在工作，但是如何工作？你能解释一下吗？

— rahim.nagori19年

1

到目前为止，这是唯一对我有用的解决方案。<div style =“-webkit-print-color-adjust：确切！important; background-color：red！important;”> ... </ div>

— Thomas，

10

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

！常规的css声明中的重要权限有效（即使在@media打印中也是如此）
使用svg

— yar1
source

6

只要启用了“打印背景颜色和图像”，！important就能解决所有现代浏览器中的问题。

— 克里斯·海因斯

2

如果您将主体与主体{-webkit-print-color-adjust：exact;一起使用，也可以在没有用户干预的情况下起作用！}（根据上述评论）

— 2013年

2

我发现，如果我使用color-adjustWebkit或Webkit变体，则实际上不需要重要规则。

— 卡萨波

6

您可以执行另一种技巧，而无需激活其他文章中提到的打印边框选项。由于已打印边框，因此您可以使用此技巧模拟纯色背景色：

.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 +）。

— 核心
source

1

这是一个疯狂的技巧，但无论打印设置如何，至少都会强制使用某种形式的背景色。太好了，谢谢。

— 布拉德·扎克

6

如果要创建“打印机友好”页面，建议您在@media打印CSS中添加“！important”。这鼓励大多数浏览器打印您的背景图像，颜色等。

例子：

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

— 坚果啤酒
source

6

对于chrome，我使用了类似的方法，并且对我有用。

在body标签内，

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

或针对特定元素，假设您有表格，并且想填写td（即单元格），

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

— 亚米尔·谢赫（Aamir Shaikh）
source

5

尽管人们!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;
    }
}

之所以可行，是因为该规则比引导程序默认规则更具体。

— 艾尔芬
source

经过数小时的搜索，我找到了这个答案。我进去并消除了Bootstrap.css和WHAM中的行！可打印背景中的颜色！

— Mighty Ferengi

1

谢谢！最后，这是使我启动并运行的答案，但是我需要添加：body {-webkit-print-color-adjust：确切的！}

— Ocean空投

3

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

在-webkit-print-color-adjust:exact;和!important当然的解决方案，没有工作，但box-shadow: inset 0 0 0 1000px gold;没有...伟大的黑客，非常感谢你:)

— 商标
source

2

认为我会根据最近的印刷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 */

— 乔纳森
source

2

经过测试和工作在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>

— 英雄希罗欣
source

1

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

— 阿拉诺
source

1

在某些情况下（无内容但有背景的块），可以使用边框分别覆盖每个块。

例如：

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

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

— Gedeon
source

0

您可以使用标记canvas并“绘制”背景，该背景可在IE9，Gecko和Webkit上使用。

— 托马斯·莱卡维利尔
source

0

如果您不介意使用图像而不是背景色（或可能是具有背景色的图像），则以下解决方案已在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;
    }

}

— 凯西利
source

我采用了您的方法，并尝试使其在IE11上运行，但遗憾的是它没有起作用。直到我!important在类中的每个属性上赋予一个值，然后使其生效。

— Sal Alturaigi

0

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

签出以下示例：具有页眉和页脚的Ultimate Print HTML模板

演示：带有页眉和页脚演示的终极打印HTML模板

— 德莱顿·威廉姆斯（Dryden Williams）
source

0

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

— 瓦西里·伊万诺夫（Vasily Ivanov）
source