原因: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;
}