我是这家公司的新手，我们有一个使用数英里 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不会在打印中出现。现在我明白了，如果没有更多细节，你们可能无法回答我的问题。我只是好奇之前是否有人遇到过这个问题或类似的问题。
要在 Chrome 中启用后台打印：
body {
-webkit-print-color-adjust: exact !important;
}
如果用户在其打印设置中关闭了“打印背景颜色和图像”，则没有 CSS 会覆盖它，因此请始终考虑这一点。这是默认设置。
一旦设置好它就会打印背景颜色和图像，你在那里的东西就会起作用。
它存在于不同的地方。在 IE9beta 中，它位于 Paper options 下的 Print->Page Options
在 FireFox 中，它位于页面设置 -> 选项下的 [格式和选项] 选项卡中。
知道了：
CSS：
box-shadow: inset 0 0 0 1000px gold;
适用于所有盒子 - 包括表格单元格！
试试这个，它在谷歌浏览器上对我有用：
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; 单独is Not enough
使用!important该属性
这是在我添加到每个标签后在 chrome 上打印预览并在每个标签中添加属性!importantbackground-colorcolor
这是在添加之前在 chrome 上打印预览!important
现在，要知道如何设置inject !importantdiv 的样式，请查看这个答案我无法使用“！important”规则注入样式
两种可行的解决方案（至少在现代 Chrome 上 - 尚未经过测试）：
如果您正在寻找创建“打印机友好”页面，我建议将“！important”添加到您的@media print CSS。这鼓励大多数浏览器打印您的背景图像、颜色等。
例子：
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
您可以在不激活其他帖子中提到的打印边框选项的情况下执行另一个技巧。由于打印了边框，因此您可以使用此 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"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
尽管这需要一些额外的代码和一些额外的注意才能使背景颜色可见，但它仍然是我知道的唯一解决方案。
请注意，此 hack 不适用于display: block;or以外的元素display: table-cell;，例如<table class="your-background">and<tr class="your-background">将不起作用。
我们使用它来获取所有浏览器中的背景颜色（仍然需要 IE9+）。
尽管!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;
}
}
这是有效的，因为该规则比引导默认值更具体。
对于 chrome，我使用了类似的东西，它对我有用。
在body标签内，
<body style="-webkit-print-color-adjust: exact;"> </body>
或者对于一个特定的元素，假设你有表格并且你想填充一个 td 即一个单元格，
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
I just added to the print media query this snippet and all style was applied as intended:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
发现了这个问题，因为我在尝试从 Google Apps 脚本中的 html 输出生成 PDF 时遇到了类似的问题，其中背景颜色也没有“打印”。
-webkit-print-color-adjust:exact;和!important解决方案当然没有用，但是确实box-shadow: inset 0 0 0 1000px gold;......很棒的黑客，非常感谢你:)
到 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>
想我会从最近的打印 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 */
我发现的最佳“解决方案”是提供一个突出的“打印”按钮或链接，它会弹出一个小对话框，粗体、简短和简洁地解释他们需要调整打印机设置（使用 ABC 123 项目符号点指令）以启用背景和图像打印。这对我来说非常成功。
在某些情况下（没有任何内容但有背景的块）可以使用边框覆盖它，单独为每个块。
例如：
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
@media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
此外，启用 > 模拟 CSS 媒体，来自 > Inspact > 更多工具 > 渲染。可以在这里找到非常详细的步骤。
您可以使用标签canvas并“绘制”背景，这适用于 IE9、Gecko 和 Webkit。
如果您不介意使用图像而不是背景颜色（或者可能是具有背景颜色的图像），那么下面的解决方案在 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;
}
}
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 中测试并运行...
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
不要设置里面的background-color打印样式表。只需在普通的 css 文件中设置属性，它就可以正常工作:)
查看此示例：带有页眉和页脚的终极打印 HTML 模板