我首先测试了一段如下的代码,发现打印预览时的确无法显示背景色。
<div class="two">
比较奇怪的是,如果我删除bootstrap的样式引用,就可以正常打印预览了。想来必定是bootstrap3 设置了@media print
相关属性导致。
果然,翻开源码,发现如下代码:
注意代码里面的 color:#000 !important;
以及 background-color:transparent !important;
。它表示打印时,页面中的文字都为黑色,并且背景色都设置为透明。因为有了这样的样式,我们的背景色就打印
不出来了。去掉这两段代码,一切OK!
值得一提的说:如果页面中有超链接,打印时会显示超链接的地址,这样比较难看。我们删除对应的样式即可。