CSS @media 打印背景色问题；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3893986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS @media print issues with background-color;
提问by Weston Watson
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-colorin @media print.
我是这家公司的新员工，我们的产品使用了数英里的 css。我正在尝试为我们的应用程序制作可打印的样式表，但我遇到了background-colorin 的问题@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-colorwon't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.
其他一切都有效，我可以修改边框等，但background-color不会在打印中通过。现在我明白，如果没有更多细节，你们可能无法回答我的问题。我只是好奇之前是否有人遇到过这个问题或类似的问题。
回答by drolex
To enable background printing in Chrome:
在 Chrome 中启用后台打印：
body {
-webkit-print-color-adjust: exact !important;
}
回答by Ryan Ternier
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.
在 FireFox 中，它位于页面设置 -> 选项下的 [格式和选项] 选项卡中。
回答by T4NK3R
Got it:
知道了：
CSS:
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...
- （如果要相信 PDF 打印机输出文件..？）
- 仅在 Ubuntu 上的 Chrome + Firefox 中测试...
回答by MAXE
Try this, it worked for me on Google Chrome:
试试这个，它在谷歌浏览器上对我有用：
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
回答by Basheer AL-MOMANI
-webkit-print-color-adjust: exact;alone is Not enoughyou have to use !importantwith the attribute
-webkit-print-color-adjust: exact;is Not enough您必须单独使用!important该属性
this is printing preview on chrome afterI added !importantto each background-colorand colorattrubute in each tag
这是在我添加!important到每个标签中的每个background-color和color属性后在 chrome 上打印预览
and this is printing preview on chrome beforeadding !important
这是在添加之前在 chrome 上打印预览!important
now, to know how to inject!importantto div's style, check out this answer I'm unable to inject a style with an “!important” rule
现在，要知道如何设置inject!importantdiv 的样式，请查看此答案我无法使用“！重要”规则注入样式
回答by yar1
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)
- Use svg
- !important 在常规 css 声明中有效（甚至不在 @media 打印中）
- 使用 svg
回答by Aamir Shaikh
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，即一个单元格，
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
回答by kernel
There is another trick you can do withoutactivating the print border option mentioned in other posts. Since borders areprinted you can simulate solid background-colors with this hack:
您可以在不激活其他帖子中提到的打印边框选项的情况下执行另一个技巧。由于打印了边框，因此您可以使用此 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"> </td>
<td class="your-background"> </td>
<td class="your-background"> </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.
请注意，此 hack 不适用于display: block;or以外的元素display: table-cell;，因此例如<table class="your-background">和<tr class="your-background">将不起作用。
We use this to get background colors in all browsers (still, IE9+ required).
我们使用它来获取所有浏览器中的背景颜色（仍然需要 IE9+）。
回答by nuts-n-beer
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 中添加“!important”。这鼓励大多数浏览器打印您的背景图像、颜色等。
EXAMPLES:
例子：
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
回答by The Aelfinn
Despite !importantusage being generally frowned upon, this is the offending code in bootstrap.csswhich prevents table rows from being printed with background-color.
尽管!important使用通常不受欢迎，但这是bootstrap.css防止表行被打印的有问题的代码background-color。
.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.
这是有效的，因为规则比引导默认值更具体。
