我首先測(cè)試了一段如下的代碼，發(fā)現(xiàn)打印預(yù)覽時(shí)的確無(wú)法顯示背景色。
<!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的樣式引用，就可以正常打印預(yù)覽了。想來(lái)必定是bootstrap3 設(shè)置了@media print相關(guān)屬性導(dǎo)致。
果然，翻開(kāi)源碼,發(fā)現(xiàn)如下代碼：
@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; 。它表示打印時(shí)，頁(yè)面中的文字都為黑色，并且背景色都設(shè)置為透明。因?yàn)橛辛诉@樣的樣式，我們的背景色就打印
不出來(lái)了。去掉這兩段代碼，一切OK！
值得一提的說(shuō)：如果頁(yè)面中有超鏈接，打印時(shí)會(huì)顯示超鏈接的地址，這樣比較難看。我們刪除對(duì)應(yīng)的樣式即可。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
