Html 打印页面中的 div 背景颜色不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6553439/
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
div background color in print page doesn't work
提问by Ebad ghafoory
I want use a divthat has a background-color, but if I print the page it appears in white .
我想使用div带有 的background-color，但是如果我打印页面，它会显示为白色。
When I create a table using <tr bgcolor="#333333">it also does not work.
当我使用<tr bgcolor="#333333">它创建表时也不起作用。
How I can create a print page using cssand html?
如何使用css和创建打印页面html？
My code :
我的代码：
<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
<tr bgcolor="#999999">
<td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
</tr>
</table>
回答by Jared Farrish
I would look into the media queryway of targeting a stylesheet to the print. I don't believe you will find a common way cross-browser of doing what you want to do (control whether the user's printer prints a background) without using PDFs of your content, which may not be desirable/doable. However, you should consider specially handling your print styles and perhaps avoid backgrounds in your design of the printed page.
我会研究将样式表定位到打印的媒体查询方式。我不相信你会找到一种通用的跨浏览器方式来做你想做的事情（控制用户的打印机是否打印背景）而不使用你的内容的 PDF，这可能是不可取/不可行的。但是，您应该考虑特别处理您的打印样式，并可能避免在您的打印页面设计中使用背景。
http://www.w3.org/TR/css3-mediaqueries/
http://www.w3.org/TR/css3-mediaqueries/
EDIT
编辑
Seeing your other comment, if you have to make the backgrounds print and have a single user, teach your user to make the printer print backgrounds. See for example in Firefox (checkbox):
看到你的其他评论，如果你要打印背景并且只有一个用户，教你的用户让打印机打印背景。参见 Firefox 中的示例（复选框）：
回答by KDawg
CSS: box-shadow: inset 0 0 0 1000px gold;
CSS： box-shadow: inset 0 0 0 1000px gold;
Works for all browsers and on table cells and rows.
适用于所有浏览器以及表格单元格和行。
回答by Marek Musielak
Background colors and images don't print by default.
默认情况下不打印背景颜色和图像。
It is a printer option your users could change, but you absolutely can't count on your users knowing or doing that. You cannot control this from the web side (as far as I know).
这是您的用户可以更改的打印机选项，但您绝对不能指望您的用户知道或这样做。您无法从 Web 端控制这一点（据我所知）。
回答by Govind Samrow
In Crome "-webkit-print-color-adjust: exact;" works for me.
在 Crome 中“-webkit-print-color-adjust：精确；” 为我工作。
Use:
用：
@media print {
.collage_bg {
background-color: #E6E7E9 !important;
-webkit-print-color-adjust: exact;
}
}
Or Check Background Graphics option:
或检查背景图形选项：
Both options working fine for me.
这两个选项对我来说都很好。
回答by srinikolli
Here is something worked for me as I was using Fixed size block element. The image used is 1px X 1px but forced to expand to the size of box. This way we are printing image directly instead of background color/image.
这是我使用固定大小块元素时对我有用的东西。使用的图像是 1px X 1px 但被迫扩展到框的大小。这样我们直接打印图像而不是背景颜色/图像。
<style type="text/css">
.outer {
width: 200px;
height: 80px;
position: relative;
}
.outer .grayBg {
position: absolute;
left: 0;
top: 0;
height: 80px;
width: 100%;
z-index: 1
}
.inner {
width: 100%;
position: relative;
z-index: 10
}
</style>
<div class="outer"><img src="grayBg.png" class="grayBg" />
<div class="inner">Some text</div>
</div>
回答by Boyye
You could however always use an image for that. Make an image with a width of 1px and repeat it like this:
但是，您始终可以为此使用图像。制作一个宽度为 1px 的图像并像这样重复它：
background: url('path/to/image.png') repeat-x;
