CSS 打印预览中未显示背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14987496/
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
Background color not showing in print preview
提问by purgatory101
I am trying to print a page. In that page I have given a table a background color. When I view the print preview in chrome its not taking on the background color property...
我正在尝试打印一页。在那个页面中，我给了一个表格一个背景颜色。当我在 chrome 中查看打印预览时，它没有采用背景颜色属性...
So I tried this property:
所以我尝试了这个属性：
-webkit-print-color-adjust: exact;
but still its not showing the color.
但它仍然没有显示颜色。
.vendorListHeading {
background-color: #1a4567;
color: white;
-webkit-print-color-adjust: exact;
}
<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
<table class="table" style="margin-bottom: 0px;">
<thead>
<tr class="vendorListHeading" style="">
<th>Date</th>
<th>PO Number</th>
<th>Term</th>
<th>Tax</th>
<th>Quote Number</th>
<th>Status</th>
<th>Account Mgr</th>
<th>Shipping Method</th>
<th>Shipping Account</th>
<th style="width: 184px;">QA</th>
<th id="referenceSO">Reference</th>
<th id="referenceSO" style="width: 146px;">End-User Name</th>
<th id="referenceSO" style="width: 118px;">End-User's PO</th>
<th id="referenceSO" style="width: 148px;">Tracking Number</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>22</td>
<td>20130000</td>
<td>Jim B.</td>
<td>22</td>
<td>510 xxx yyyy</td>
<td>[email protected]</td>
<td>PDF</td>
<td>12/23/2012</td>
<td>Approved</td>
<td>PDF</td>
<td id="referenceSO">12/23/2012</td>
<td id="referenceSO">Approved</td>
</tr>
</tbody>
</table>
</div>
回答by purgatory101
The Chrome CSS property -webkit-print-color-adjust: exact;works appropriately.
Chrome CSS 属性-webkit-print-color-adjust: exact;可以正常工作。
However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media printand @media screen.
但是，确保您有正确的 CSS 用于打印通常很棘手。可以做几件事来避免您遇到的困难。首先，将所有打印 CSS 与屏幕 CSS 分开。这是通过@media print和完成的@media screen。
Often times just setting up some extra @media printCSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.
很多时候，仅仅设置一些额外的@media printCSS 是不够的，因为在打印时你仍然包含所有其他的 CSS。在这些情况下，您只需要了解 CSS 的特殊性，因为打印规则不会自动战胜非打印 CSS 规则。
In your case, the -webkit-print-color-adjust: exactis working. However, your background-colorand color definitions are being beaten out by other CSS with higher specificity.
在你的情况下，-webkit-print-color-adjust: exact正在工作。但是，您的background-color和颜色定义正在被其他具有更高特异性的 CSS 击败。
While I do notendorse using !importantin nearly any circumstance, the following definitions work properly and expose the problem:
虽然我不转让使用!important几乎任何情况下，下面的定义正常工作和揭露问题：
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
@media print {
.vendorListHeading th {
color: white !important;
}
}
Here is the fiddle(and embeddedfor ease of print previewing).
回答by Riskbreaker
That CSS property is all you need it works for me...When previewing in Chrome you have the option to see it BW and Color(Color: Options- Color or Black and white) so if you don't have that option, then I suggest to grab this Chrome extension and make your life easier:
这个 CSS 属性就是你所需要的，它对我有用......在 Chrome 中预览时，你可以选择查看 BW 和颜色（颜色：选项 - 颜色或黑白），所以如果你没有那个选项，那么我建议抓住这个 Chrome 扩展，让你的生活更轻松：
The site you added on fiddle needs this in your media print css (you have it just need to add it...
您在 fiddle 上添加的站点需要在您的媒体打印 css 中使用它（您只需添加它...
media print CSS in the body:
媒体在正文中打印 CSS：
@media print {
body {-webkit-print-color-adjust: exact;}
}
UPDATEOK so your issue is bootstrap.css...it has a media print css as well as you do....you remove that and that should give you color....you need to either do your own or stick with bootstraps print css.
更新OK 所以你的问题是 bootstrap.css ......它和你一样有一个媒体打印 css ......你删除它，这应该给你颜色......你需要自己做或坚持引导程序打印 css。
When I click print on this I see color.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/
当我点击打印时，我看到颜色.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/
回答by Travis J
Chrome will not render background-color, or several other styles, when printing if the background graphics setting is turned off.
如果关闭背景图形设置，Chrome 在打印时将不会呈现背景颜色或其他几种样式。
This has nothing to do with css, @media, or specificity. You can probably hack your way around it, but the easiest way to get chrome to show the background-color and other graphics is to properly check this checkbox under More Settings.
这与 css、@media 或特异性无关。您可能可以绕过它，但让 chrome 显示背景颜色和其他图形的最简单方法是正确选中更多设置下的此复选框。
回答by Flea
I just needed to add the !importantattribute onto the the background-color tag in order for it to show up, did not need the webkit part:
我只需要将该!important属性添加到 background-color 标签上即可显示，不需要 webkit 部分：
background-color: #f5f5f5 !important;
background-color: #f5f5f5 !important;
回答by Vyacheslav Cotruta
If you are using bootstrap or any other 3rd party CSS, make sure you specify the media screen only on it, so you have the control of the print media type in your own CSS files:
如果您使用引导程序或任何其他 3rd 方 CSS，请确保仅在其上指定媒体屏幕，以便您可以在自己的 CSS 文件中控制打印媒体类型：
<link rel="stylesheet" media="screen" href="">回答by Miguel Angel Mendoza
Your CSS must be like this:
你的 CSS 必须是这样的：
@media print {
body {
-webkit-print-color-adjust: exact;
}
}
.vendorListHeading th {
background-color: #1a4567 !important;
color: white !important;
}
回答by BassMHL
FOR THOSE USING BOOTSTRAP.CSS, this is the fix!
对于那些使用 BOOTSTRAP.CSS 的人来说，这就是修复！
I have tried all the solutions and they weren't working... until I discovered that bootstrap.css had a super annoying @media printthat resets all your colors, background-colors, shadows, etc...
我已经尝试了所有的解决方案，但它们都不起作用……直到我发现 bootstrap.css 有一个超级烦人的东西@media print，它会重置你所有的颜色、背景颜色、阴影等……
@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
So either remove this section from bootstrap.css (or bootstrap.min.css)
因此，要么从 bootstrap.css（或 bootstrap.min.css）中删除此部分
Or override these values in the css of the page you want to print in your own @media print
或者在您要自己打印的页面的 css 中覆盖这些值 @media print
@media print {
body {
-webkit-print-color-adjust: exact;
}
.customClass{
//customCss + !important;
}
//more of your custom css
}
回答by Pete Fecteau
Use the following in your @media printstyle sheet.
在您的@media print样式表中使用以下内容。
h1 {
background-color:#404040;
background-image:url("img/404040.png");
background-repeat:repeat;
box-shadow: inset 0 0 0 1000px #404040;
border:30px solid #404040;
height:0;
width:100%;
color:#FFFFFF !important;
margin:0 -20px;
line-height:0px;
}
Here are a couple things to note:
这里有几点需要注意：
- background-color is the absolute fallback and is there for posterity mostly.
- background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not...
- Set the box-shadow, if that doesn't work...
- Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box.
- Zero out the heigh/width depending on what you're controlling in the border attribute.
- Font color will default to black unless you use !important
- Set line-height to 0 to fix for the box not having physical dimension.
- Make and host your own PNGs :-)
- If the text in the block needs to wrap, put it in a div and position the div using position:relative; and remove line-height.
- background-color 是绝对的后备，主要用于后代。
- background-image 使用 1px x 1px 像素的 #404040 制作成 PNG。如果用户启用了图像，它可能会工作，如果没有......
- 设置框阴影，如果这不起作用......
- 边框 = 1/2 您所需的框、实心、颜色的高度和/或宽度。在上面的示例中，我想要一个 60px 高度的框。
- 根据您在边框属性中控制的内容将高度/宽度归零。
- 字体颜色将默认为黑色，除非您使用 !important
- 将 line-height 设置为 0 以修复没有物理尺寸的框。
- 制作和托管您自己的 PNG 文件 :-)
- 如果块中的文本需要换行，则将其放入一个 div 并使用 position:relative 定位该 div；并删除行高。
See my fiddlefor a more detailed demonstration.
有关更详细的演示，请参阅我的小提琴。
回答by Bertrand
Are your sure this is a css issue ? There are some posts on google around this issue: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s
您确定这是 css 问题吗？谷歌上有一些关于这个问题的帖子：http: //productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s
It may be related to the print process. On safari, which is webkit also, there is a checkbox to print background images and colors in the printer dialog.
可能与打印过程有关。在 safari（也是 webkit）上，打印机对话框中有一个用于打印背景图像和颜色的复选框。
回答by PADMAJA SONWANE
For IE
IE浏览器
If you are using IE then go to print preview ( right click on document -> print preview ), go to settings and there is option "print background color and images", select that option and try.
如果您使用的是 IE，则转到打印预览（右键单击文档 -> 打印预览），转到设置并有“打印背景颜色和图像”选项，选择该选项并尝试。
