我试图为我们的应用程序制作一个可打印的样式表，但我在@media打印的背景颜色有问题。
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
其他一切工作，我可以修改边界和这样，但背景色不会通过打印。我知道，如果没有更多细节，你们可能无法回答我的问题。我只是好奇是否有人有这个问题，或类似的，以前。
如果用户在打印设置中关闭了“打印背景颜色和图像”，没有CSS会覆盖它，所以一定要考虑到这一点。这是默认设置。
一旦设置好，它就会打印背景颜色和图像，你所拥有的就可以工作了。
它在不同的地方被发现。 在IE9beta中，它可以在打印->页选项下的纸张选项中找到
在FireFox中，它在页面设置->[格式和选项]选项卡下的选项。
我发现的最佳“解决方案”是提供一个突出的“打印”按钮或链接，弹出一个小对话框，大胆、简要、简洁地解释他们需要调整打印机设置(使用ABC 123项目符号指令)，以启用背景和图像打印。这对我来说非常成功。
启用Chrome后台打印:
body {
-webkit-print-color-adjust: exact !important;
}
编辑: Chrome、Safari和Firefox浏览器:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
明白了:
CSS:
box-shadow: inset 0 0 0 1000px gold;
适用于所有盒子——包括表格单元格!!
(如果pdf打印机的输出文件是可信的…?) 只在Ubuntu上的Chrome + Firefox中测试…
试试这个，它为我谷歌Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
在某些情况下(没有任何内容，但有背景的块)，可以使用边框单独覆盖每个块。
例如:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
@media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
还有一个技巧，你可以不用激活打印边框选项，在其他文章中提到过。因为边界是打印出来的，你可以用下面的方法模拟纯色背景:
.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以外的元素不起作用;或者display: table-cell;，例如<table class="your-background">和<tr class="your-background">将不起作用。
我们使用这个来获得所有浏览器的背景色(仍然需要IE9+)。
如果你不介意使用图片而不是背景色(或者可能是带有你背景色的图片)，下面的解决方案对我来说在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;
}
}
如果你想创建“打印机友好”的页面，我建议添加“!”对你的@media打印CSS很重要。这会鼓励大多数浏览器打印你的背景图片、颜色等。
例子:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
我想我应该从最近的打印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 */
发现这个问题，因为我在谷歌应用程序脚本中从html输出生成PDF时遇到了类似的问题，其中背景颜色也没有“打印”。
-webkit-print-color-adjust:准确;重要的解决方案当然没有工作，但是盒子阴影:插入000 1000px黄金;做了……很棒的hack，非常感谢你:)
对于chrome，我已经使用了这样的东西，它为我工作。
在body标签中，
<body style="-webkit-print-color-adjust: exact;"> </body>
或者对于一个特定的元素，假设你有一个表格你想要填充一个td，也就是一个单元格，
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
在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>
-webkit-print-color-adjust:准确;仅仅是不够的 必须在属性中使用!important
这是打印预览后，我添加!重要的每个背景颜色和颜色属性在每个标签
这是在添加之前在chrome上打印预览
现在，要知道如何注入!对div的风格很重要，看看这个答案，我无法注入一个“!”重要”规则
尽管!的重要用法通常不受欢迎，但这是bootstrap.css中令人讨厌的代码，它阻止表行以背景色打印。
.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;
}
}
这是因为该规则比引导默认值更具体。
不要在打印样式表中设置背景颜色。只要在正常的css文件中设置属性，它就可以正常工作:)
签出这个例子:带有页眉和页脚的终极打印HTML模板
演示:带页眉和页脚的终极打印HTML模板演示
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和边缘
身体{ background - color: # E5FFE5; ｝ .bg_print { border-bottom: 30px solid #FFCC33; ｝ .orange_bg_print_content { margin-top: -25 px; 填充:0 10px; ｝ < div class = " bg_print”> < / div > < div class = " orange_bg_print_content”> 我的内容与背景! < / div >
测试和工作在Chrome和Firefox和Edge…
我只是在打印媒体查询中添加了这个片段，所有的样式都按预期应用:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
* {
-webkit-print-color-adjust: exact;
}
此外，启用>模拟CSS媒体从>检查>更多的工具>渲染。非常详细的步骤可以在这里找到。
