打印页面中的div背景颜色不起作用

Question

我想使用div background-color，但如果我打印页面，则会显示为白色。

当我使用<tr bgcolor="#333333">创建表格时，它也不起作用。

如何使用css和html创建打印页面？

我的代码：

<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>

Answer 1

我会研究将样式表定位到打印的媒体查询方式。我不相信您会找到一种常见的跨浏览器来执行您想要做的事情（控制用户的打印机是否打印背景），而不使用您的内容的PDF，这可能是不可取的/可行的。但是，您应该考虑专门处理您的打印样式，并且可能避免在您的打印页面设计中使用背景。

http://www.w3.org/TR/css3-mediaqueries/

修改

查看您的其他评论，如果您必须打印背景并拥有单个用户，请教您的用户使打印机打印背景。例如，参见Firefox（复选框）：

Answer 2

CSS：box-shadow: inset 0 0 0 1000px gold;

适用于所有浏览器以及表格单元格和行。

Answer 3

默认情况下不打印背景颜色和图像。

这是您的用户可以更改的打印机选项，但您绝对不能指望您的用户知道或这样做。你无法从网络上控制这一点（据我所知）。

Answer 4

在Crome“-webkit-print-color-adjust：exact;”适合我。

使用：

@media print {
    .collage_bg {
        background-color: #E6E7E9 !important;
        -webkit-print-color-adjust: exact; 
    }
}

或检查背景图形选项：

这两个选项对我来说都很好。

Answer 5

当我使用固定大小的块元素时，这对我有用。使用的图像是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>

Answer 6

但是，您可以随时使用图像。制作宽度为1像素的图像，然后像这样重复：

background: url('path/to/image.png') repeat-x;