加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-18 00:47:55 所属栏目:安全 来源:网络整理
导读:我首先测试了一段如下的代码,发现打印预览时的确无法显示背景色。 Regonline div class="main" div class="one" div class="two" div class="three" 比较奇怪的是,如果我删除bootstrap的样式引用,就可以正常打印预览了。想来必定是bootstrap3 设置了 @med

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

Regonline

<div class="main">
<div class="one">


<div class="two">
<div class="three">

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

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

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!

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

总结

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读