CSS @media用背景色打印问题;
我在这家公司是新来的，我们有一个使用css数英里的产品。 我正在尝试为我们的应用程序制作可打印的样式表，但是我在@media print中遇到了背景色的问题…
@media print { #header{display:none;} #adwrapper{display:none;} td {border-bottom: solid; border-right: solid; background-color: #c0c0c0;}} 一切工作，我可以修改边界，但这样的背景颜色不会通过打印。 现在我明白你们可能无法用更多的细节来回答我的问题，我只是好奇以前有没有人有这个问题，或者类似的问题。
如果用户在打印设置中closures了“打印背景颜色和图像”，则没有CSS会覆盖该内容，因此请始终考虑此问题。 这是一个默认设置 。
一旦这样设置，它将打印背景颜色和图像，你在那里会有效果。
它在不同的地方被发现。 在IE9beta中，可以在“纸张选项”下的“打印”>“页面选项”中find它
在FireFox中，它位于选项下的页面设置 – > [格式和选项]选项卡中。
在Chrome中启用后台打印：
body { -webkit-print-color-adjust: exact; }
GOT iT – 即使问题在几年前“closures”：）
CSS： box-shadow：inset 0 0 0 1000px gold;
适用于所有盒子 – 包括表格单元格！
（如果PDF打印机输出文件是相信..？）
– 仅在Ubuntu的Chrome + Firefox上进行testing…
试试这个，它在谷歌浏览器上为我工作：
<style media="print" type="text/css"> .page { background-color: white !important; } </style>
有两种解决scheme可以工作（至less在现代Chrome上 – 没有经过testing）：
- ！在正规的css声明中的重要权利（即使在@media打印）
- 使用svg
如果您正在创build“打印机友好”页面，我build议在您的@media打印CSS中添加“！important”。 这鼓励大多数浏览器打印您的背景图片，颜色等
例子：
background:#3F6CAF url('example.png') no-repeat top left !important; background-color: #3F6CAF !important;
-webkit-print-color-adjust: exact; 单独is Not enough你必须使用!important的属性
这是在Chrome上添加!important对每个标签中每个background-color和color属性!important预览
这是在Chrome上添加!important预览
现在，知道如何inject !important对div的风格!important ，看看这个答案我无法注入一个“！重要”规则的样式
还有一个技巧可以在不激活其他post中提到的打印边界选项的情况下进行。 由于边界被打印，你可以用这个黑客来模拟纯色的背景色：
.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"> </td> <td class="your-background"> </td> <td class="your-background"> </td> </tr> </table>
虽然这需要一些额外的代码和一些额外的照顾，使背景颜色可见，但它仍然是我唯一的解决scheme。
注意这个黑客不会在display: block;以外的元素上工作display: block; 或者display: table-cell; ，所以例如<table class="your-background">和<tr class="your-background">将不起作用。
我们用这个来获得所有浏览器的背景颜色（仍然需要IE9 +）。
对于铬，我已经使用了这样的东西，它为我工作。
在车身标签内，
<body style="-webkit-print-color-adjust: exact;"> </body>
或者对于一个特定的元素，假设你有表格，并且你想填充一个单元格，
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
我想从最近的印刷CSS经验中添加最近的和2015年的相关援助。
无论打印对话框设置如何，都能够打印背景和颜色。
要做到这一点，我必须使用！important ＆ -webkit-print-color-adjust：确切！重要的组合来获得背景和颜色才能正确打印。
另外，在声明颜色时，我发现最顽固的区域需要直接定义到你的目标。 例如：
<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 */
在某些情况下（块没有任何内容，但有背景），可以使用边框对每个块单独进行覆盖。
例如：
.colored { background: #000; border: 1px solid #ccc; width: 8px; height: 8px; } @media print { .colored div { border: 4px solid #000; width: 0; height: 0; } }
经过testing，并在2016/10年度通过Chrome，Firefox，Opera和Edge进行工作。 应该在任何浏览器上工作，并应始终如预期。
好的，我为打印背景颜色做了一些跨浏览器的实验。 只需复制，粘贴和享受！
这里是一个完整的可打印的HTML页面bootstrap：
<!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>
发现此问题，因为我在尝试从Google Apps脚本中的HTML输出中生成PDF时出现类似的问题，其中背景颜色也未被“打印”。
-webkit-print-color-adjust:exact; !important解决scheme当然是行不通的，但是box-shadow: inset 0 0 0 1000px gold; 做了…伟大的黑客，非常感谢你:)
我find的最佳“解决scheme”是提供一个突出的“打印”button或链接，popup一个小对话框，大胆简要地解释他们需要调整打印机设置（使用ABC 123项目符号指令）以启用后台和图像打印。 这对我来说非常成功。
您可以使用标记canvas并“绘制”在IE9，Gecko和Webkit上工作的背景。
如果你不介意使用图像而不是背景颜色（或者可能是背景颜色的图像），下面的解决scheme已经在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; }
}
