Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016-11-06 10:03
681 查看
我首先测试了一段如下的代码,发现打印预览时的确无法显示背景色。
<!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 设置了
@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) ")"; } 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!
值得一提的说:如果页面中有超链接,打印时会显示超链接的地址,这样比较难看。我们删除对应的样式即可。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
您可能感兴趣的文章:
相关文章推荐
- cocos2d-x在IOS7下面文字显示异常的解决办法
- 关于IE打印预览内容显示不全的问题解决
- cocos2d-x在IOS7下面文字显示异常的解决办法
- cocos2d-x在IOS7下面文字显示异常的解决办法
- IAR 代码文字显示异常问题解决方法
- python中文编码问题深入分析(二):print打印中文异常及显示乱码问题分析与解决
- MFC对话框打印预览异常问题解决
- 润乾报表 解决linux下文字显示异常的原因-字体不全
- Bootstrap 3.x 打印问题 打印无法显示背景、字体变黑
- 解决iOS打印数组和字典中文显示异常问题
- cocos2d-x在IOS7下面文字显示异常的解决办法 CGBitmapContextCreate: unsupported parameter combination
- cocos2d-x在IOS7下面文字显示异常的解决办法
- MFC对话框打印预览异常问题解决
- 如何解决打印CAD图纸时,打印预览空白不显示
- JFreechart存储为PDF不能显示中文文字的解决办法
- photoshop CS3 打文字时需要点击一下才显示字,解决办法
- WPF:解决WPF文字显示不清晰初探
- .htm .html文件图标显示异常的解决办法
- .htm .html文件图标显示异常的解决办法
- JFreechart存储为PDF不能显示中文文字的解决办法