原因:google 浏览器的打印不出现背景颜色,是因google浏览器的打印有自己定义的样式,有些会覆盖个人写的样式。
颜色
根据css优先级规则,css属性后面加“!important”的优先级最大,无条件绝对优先(比内联样式还要优先)
在所需的元素上,有颜色的样式里面都加入“!important”
背景颜色
如果背景颜色在后面加“!important”不显示,在所需的元素上设置CSS属性:
-webkit-print-color-adjust: exact;
注意:在当前所需要的标签上加样式。例如表格直接写样式名可能不显示,当指定td的会显示背景颜色。
例子:
HTML
<table border="0" class="table">
<tbody>
<tr>
<td colspan="1" class=""outside>
测试背景颜色
</td>
</tr>
</tbody>
</table>
CSS
下面,成功显示td背景颜色
td.outside {
background: #FBFBFB !important;
-webkit-print-color-adjust: exact;
}
下面,没有背景颜色
.outside {
background: #FBFBFB !important;
-webkit-print-color-adjust: exact;
}
这篇博客探讨了Google浏览器在打印时默认不显示背景颜色的问题,原因是浏览器的内部样式覆盖了用户的自定义样式。解决方案是利用CSS的`!important`规则提高样式优先级,并使用`-webkit-print-color-adjust: exact;`属性确保背景颜色在打印时显示。通过实例展示了如何为TD元素添加样式以确保背景颜色在打印中正确显示。

2404

被折叠的 条评论
为什么被折叠?



