CSS 背景不打印通常效果很好,但是,有时我使用它们来传达上下文信息。解决无法打印但您确实想要显示的 CSS 背景的最佳方法是什么?我当前正在处理的示例是一个显示财务信息的表格。不同的背景颜色用于指示数字的“好”程度(例如非常有利可图、有利可图、中性、负面、非常负面)。
当我确实需要背景颜色时,我使用边框来模拟背景。像这样的东西会起作用(但我很抱歉没有测试过这个):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
为了回应 @Steve Quezadas 的评论,我们的想法是,不使用背景,而是将一个元素插入到需要背景的元素中,并为其应用极宽的边框,以便它填充外部元素。这很可能要求该元素的内容也位于另一个包装器内部,以便它们出现在新背景元素上方......
如果你从这个开始:
<div class="has-background">Some stuff in here</div>
你可以使用这个:
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
这非常难看,但我过去用过它,它确实解决了背景颜色不打印的问题。而且,在您询问之前,您必须根据您的具体情况调整 CSS。我只是描述使用边框替换背景的概念。您的实现将取决于页面的结构,如果您的元素没有固定的宽度或高度,则这是非常困难的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)