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

Question

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

当我使用 创建表时，它也不起作用。

如何使用 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

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

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

Answer 2

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

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

编辑

看到您的其他评论，如果您必须打印背景并且只有一个用户，请教您的用户使打印机打印背景。例如，在 Firefox 中（复选框）：

Answer 3

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

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

Answer 4

在 Crome 中“-webkit-print-color-调整：精确；”对我有用。

使用：

@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

不过，您始终可以使用图像来实现这一点。制作一个宽度为 1px 的图像并像这样重复：

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