用于打印的样式表，背景颜色被忽略答案

【问题标题】：Stylesheet for printing, background-color ignored用于打印的样式表，背景颜色被忽略
【发布时间】：2016-03-22 19:15:57
【问题描述】：

我创建了一个表，在其中循环给每个 tr 类“奇数”和“偶数”。在我的样式表中，我有这个：

表 tbody tr.odd { 背景颜色：#cccccc； }

这在浏览器中有效，但在打印时无效。除了这个背景颜色之外，我的媒体样式表中的其他所有内容都可以使用。

我启用了打印颜色，我可以打印带有颜色的图像...所以？

【问题讨论】：

Firefox 11。让我在 Chrome 中试试...
请看那些打印你的页面？
我在打印一些课程作业之前遇到了问题。 IIRC，我使用 IE9 打印背景颜色。我认为 Opera 也支持它们，尽管我不确定 FF 和 Chrome 的最新版本。
尝试添加一个“td”表 tbody tr.odd td { background-color: #cccccc; }

标签： html css

【解决方案1】：

默认情况下，大多数浏览器在打印时会忽略 CSS 背景颜色和图像。这只能通过更改浏览器中的设置来覆盖，如果浏览器甚至有这样的选项（有些没有，正如 Quentin 指出的那样）。

【讨论】：

现在并不是所有的浏览器都有这样的偏好。
如果您想在打印文档中添加图片，您应该使用<img>，这样可以。

【解决方案2】：

您可以在打印预览中实现 div 的背景颜色。 divForBgColor:before 中的边框颜色将是divForBgColor 的背景颜色。

.divForBgColor {
    position: relative;
    overflow: hidden;
}

.divForBgColor:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 9999px solid #f1f2f2;
    z-index: -1;
}

【讨论】：