打印页面的div背景颜色无法显示

Question

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

当我使用<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>

- Ebad ghafoory

---

另外，你的HTML存在多种方式的问题，包括语法和差劲的开发风格。简而言之：验证你的页面；不要使用表格进行布局；将样式与内容分离（不要在 HTML 中放置样式标记）。 - Phrogz

@Phrogz - 这么说它是“坏掉了”有点过分了... - Jared Farrish

@Phrogz - broken 意味着所展示的内容无法工作。使用表格进行布局可以工作，使用表现属性可以工作，不包括tbody可以工作，使用不同的引号（或省略）可以工作。我并不是说这是最佳实践，但它并不是有问题的。 ;) - Jared Farrish

@Guffa - 我在评论中指出了这一点；请看第二条评论。 ;) 我的观点是，OP发布的内容并非完全错误，只是不被视为最佳实践。 :) - Jared Farrish

让我们都承认这是糟糕的。 - Wesley Murch

Answer 1

CSS：box-shadow：inset 0 0 0 1000px gold; 适用于所有浏览器，包括表格单元格和行。

- user1502852

---

那太邪恶了... +1（在div中使用chrome对我有效，因为我不太关心这个项目，所以我没有检查其他浏览器） - Shadow

Answer 2

我建议你学习使用媒体查询来针对打印样式表进行定位。我认为，如果不使用内容的PDF文件（可能不理想/可行），您很难找到跨浏览器的常见方法来控制用户打印背景。但是，在设计打印页面时，您应该考虑特别处理打印样式，并避免使用背景。

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

编辑

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

- Jared Farrish

---

我有一个表单，用户填写信息后，表单必须像纸张上的照片一样打印出来。我可以在这个项目中使用HTML语言吗？ - Ebad ghafoory

@ebad - 我不确定你所说的“像纸上的照片”是什么意思。如果你勾选了“打印背景”，它是否按照你的预期工作？ - Jared Farrish

@ebad - 通常在HTML中进行细粒度打印并不是一个好主意；它并没有为此设置。如果可以的话，请使用PDF；当您需要这种控制时，通常会使用PDF。 - Jared Farrish

在 Safari 和 Google Chrome 中，您只需将 CSS 样式“-webkit-print-color-adjust: exact;”添加到需要打印背景的元素中即可。 - Marco Bettiolo

嵌入式浏览器怎么样？如果我没有直接设置它的选项呢？ - Naxos84

Answer 3

默认情况下，打印时不会显示背景颜色和图片。

这是一个可由用户更改的打印机选项，但您绝对不能指望用户知道或执行该操作。据我所知，您无法从Web端控制此选项。

- Marek Musielak

---

这个回答过于笼统。你在描述什么操作系统/浏览器/版本？你所说的并不适用于所有浏览器。 - Phrogz

如果我的用户没有公开，我该如何更改打印机的设置？ - Ebad ghafoory

我们谈论的是打印机，而不是浏览器。默认情况下不打印背景的原因非常简单——节约。墨水并不便宜。网络上有很多关于这个话题的讨论。总结始终如一：“我不想被强制打印背景。如果我想打印它，我会在打印机设置中切换它”。 - Marek Musielak

你可以要求用户从IE打印带有背景的页面 - 设置 "工具" | "Internet选项" | "高级" - 部分 "打印" - "允许打印背景和背景图像"。但是，我无法确认这在每个环境中的表现方式是否相同。 - Marek Musielak

@ebad 然后只需告诉您的用户在打印时打开“打印背景和图像”选项即可。 - Phrogz

Answer 4

在Chrome浏览器中，"-webkit-print-color-adjust: exact;" 对我有效。 使用：

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

或者检查背景图形选项：

这两个选项对我都有效。

- Govind Samrow

---

在Chrome中运行得非常好；对于wkhtmltopdf也很好用。这是可以预料的，但希望这能帮助那些通过Google到达的人，因为该工具中的--background选项无法正常工作。 - pbristow

Answer 5

以下是我使用固定大小的块元素时所使用的方法。所使用的图片为1像素乘1像素，但被强制扩展到框的大小。这样我们直接打印图像而不是背景颜色/图像。

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

- srinikolli

---

这对我来说很有效，通过Google云打印在Android应用程序内打印。 - sobelito

Answer 6

不过，您总是可以使用图像来实现。创建一个宽度为1px的图像，并像这样重复：

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

- Boyye