我正在打印一页。在那一页中,我给了一张表一个背景色。
当我在chrome中查看打印预览时,它不具有背景色属性
所以我尝试了这个属性:
-webkit打印颜色调整:精确;
但它仍然没有显示颜色
http://jsfiddle.net/TbrtD/
.vendorListHeading{
背景色:#1a4567;
颜色:白色;
-webkit打印颜色调整:精确;
}
<;div class=“bs docs example”id=“soTable”style=“padding top:10px;”;
<;table class=“table”style=“页边距底部:0px;”;
<;thead>;
<;tr class=“vendorListHeading”style=”“>;
<;th>;日期</th>;
<;th>;采购订单编号</th>;
<;th>;术语</th>;
<;th>;税务</th>;
<;th>;报价编号</th>;
<;th>;地位</th>;
<;th>;客户经理</th>;
<;th>;运输方式</th>;
<;th>;航运账户</th>;
<;th style=“宽度:184px;”大于;质量保证</th>;
<;th id=“referenceSO”>;参考</th>;
<;th id=“referenceSO”style=“width:146px;”的;最终用户名称</th>;
<;th id=“referenceSO”style=“width:118px;”和;最终用户的采购订单</th>;
<;th id=“referenceSO”style=“width:148px;”和;追踪号码</th>;
</tr>;
</thead>;
<;t车身>;
<;tr class=”“>;
<;td>;22</td>;
<;td>;20130000</td>;
<;td>;吉姆·B.</td>;
<;td>;22</td>;
<;td>;510 xxx yyyy</td>;
<;td>;[email protected]</td>;
<;td>;PDF</td>;
<;td>;2012年12月23日</td>;
<;td>;批准</td>;
<;td>;PDF</td>;
<;td id=“referenceSO”>;2012年12月23日</td>;
<;td id=“referenceSO”>;批准</td>;
</tr>;
</t车身>;
</表>;
</部门>;
Chrome CSS属性-webkit打印颜色调整:精确工作正常
但是,确保打印时使用正确的CSS通常是很棘手的。可以做几件事来避免你遇到的困难。首先,将所有打印CSS与屏幕CSS分开。这是通过@媒体打印和@媒体屏幕完成的
通常情况下,仅仅设置一些额外的@媒体打印CSS是不够的,因为打印时还包括所有其他CSS。在这些情况下,您只需要了解CSS的特殊性,因为打印规则不会自动战胜非打印CSS规则
在您的情况下,-webkit print color adjust:exact正在工作。然而,您的背景色和颜色定义正被其他具有更高特异性的CSS击败
虽然我不使用背书!重要信息在几乎任何情况下,以下定义都能正常工作并暴露问题:
@媒体打印{
售货员{
背景色:#1a4567!重要;
-webkit打印颜色调整:精确;
}
}
@媒体印刷品{
.卖方{
颜色:白色!重要;
}
}
这是小提琴(为了便于打印预览而嵌入)