当前位置：首页 > 资讯 > 技术文档

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

时间：2021-02-01 00:03 编辑：来源：阅读：
扫一扫，手机访问

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Regonline</title>
 <link href="css/bootstrap.css" rel="stylesheet" />
 <link href="css/font-awesome.min.css" rel="stylesheet" />
</head>

<body>

 <style>

  .main{

   overflow: hidden;
   padding: 40px;
  }

  .one, .two, .three{

   float: left;

   height: 40px;
  }

  .one{

   width: 40%;
   background-color: red;
  }

  .two{

   width: 30%;
   background-color: green;
  }

  .three{

   width: 30%;
   background-color: pink;
  }


 </style>
  
  <div class="main">
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
  </div>
</body>

</html>

比较奇怪的是，如果我删除bootstrap的样式引用，就可以正常打印预览了。想来必定是bootstrap3 设置了[code]@media print[/code]相关属性导致。果然，翻开源码,发现如下代码：

@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) ")";
 }
 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;
 }
}

注意代码里面的 [code]color:#000 !important; [/code]以及 [code]background-color:transparent !important; [/code] 。它表示打印时，页面中的文字都为黑色，并且背景色都设置为透明。因为有了这样的样式，我们的背景色就打印不出来了。去掉这两段代码，一切OK！ [b]值得一提的说：[/b]如果页面中有超链接，打印时会显示超链接的地址，这样比较难看。我们删除对应的样式即可。 [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：代码触发js事件(click、change)示例应用
下一篇：document.styleSheets[0].rules 与 cssRules区别

资讯排行榜
更多>>