在使用 Bootstrap 3.x 进行页面开发时，我们可能会遇到打印预览中背景色与文字显示异常的问题。具体表现为：
这是因为 Bootstrap 3.x 中默认有一些 CSS 样式会影响打印预览的效果，但我们可以通过以下方式来解决问题。
为了实现标准的打印预览效果，我们需要定义打印样式表，并在 HTML 中引入它。我们可以在样式表中重置一些 CSS 样式，以达到预期效果，具体步骤如下：
<link rel="stylesheet" type="text/css" href="print.css" media="print">
@media print {
/* 重置背景色与背景图片 */
body, * {
background: transparent !important;
color: inherit !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* 隐藏不需要打印的元素 */
@page {
size: auto;
margin: 0mm;
}
.no-print, .no-print * {
display: none !important;
}
}
在这个样式表中，我们使用 @media print 媒体查询来定义打印样式。其中，我们通过 background: transparent !important 来重置背景色与背景图片。
<div class="printable">需要打印的内容</div>
在开发中，我们常常需要控制需要打印的部分。为了实现这个功能，可以在 HTML 文件中使用 .printable 类来指定需要打印的内容。在样式表中，我们同样可以使用 .no-print 类来隐藏不需要打印的元素。
在浏览器中打印预览功能，即可看到打印预览已经正常显示了。
以下是两条示例说明：
示例一：打印页面中的表格
在页面中，我们通常会使用表格展示数据。如果需要打印表格，并确保表格中的背景色能够正确显示，我们就需要使用以上的三个步骤来解决问题。如果表格过长，则也可以使用 .no-print 类来隐藏表格的一部分，保证打印效果符合预期。
示例二：打印页面中的图表
如果需要打印页面中的图表，我们同样可以使用以上的三个步骤来解决问题。如果图表背景色与文字显示异常，则使用样式表中的重置样式即可，具体表现为 background: transparent !important; 和 color: inherit !important;。另外，为了打印效果更加美观，我们也可以使用 .no-print 类来隐藏一些不必要的元素，比如图表下面的说明文字等。
本文链接：http://task.lmcjl.com/news/10187.html