Bootstrap 3.x打印预览背景色与文字显示异常的解决

Bootstrap 3.x打印预览背景色与文字显示异常的解决

我首先测试了一段如下的代码，发现打印预览时的确无法显示背景色。

比较奇怪的是，如果我删除bootstrap的样式引用，就可以正常打印预览了。想来必定是bootstrap3 设置了@media print相关属性导致。

果然，翻开源码,发现如下代码：

@media print {

* {

color: #000 !important;

text-shadow: none !important;

background: transparent !important;

box-shadow: none !important;

}

a,

a:visited {

text-decoration: underline;

}

a[href]:after {

content: " (" attr(href) ")";

}

abbr[title]:after {

content: " (" attr(title) ")";

}

http:// a[href^="javascript:"]:after,

a[href^="#"]:after {

content: "";

}

pre,

blockquote {

border: 1px solid #999;

page-break-inside: avoid;

}

thead {

display: table-header-group;

}

tr,

img {

page-break-inside: avoid;

}

img {

max-width: 100% !important;

}

p,

h2,

h3 {

orphans: 3;

widows: 3;

}

h2,

h3 {

page-break-after: avoid;

}

select {

background: #fff !important;

}

.navbar {

display: none;

}

.table td,

.table th {

background-color: #fff !important;

}

.btn > .caret,

.dropup > .btn > .caret {

border-top-color: #000 !important;

}

.label {

border: 1px solid #000;

}

.table {

border-collapse: collapse !important;

}

.table-bordered th,

.table-bordered td {

border: 1px solid #ddd !important;

}

}

注意代码里面的 color:#000 !important; 以及 background-color:transparent !important;  。它表示打印时，页面中的文字都为黑色，并且背景色都设置为透明。因为有了这样的样式，我们的背景色就打印

不出来了。去掉这两段代码，一切OK！

值得一提的说：如果页面中有超链接，打印时会显示超链接的地址，这样比较难看。我们删除对应的样式即可。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。