我正在试着打印一页。在该页中，我给一个表设置了背景色。
当我在chrome浏览器中查看打印预览时，它没有采用背景色属性…
所以我尝试了这个性质:
-webkit-print-color-adjust: exact;
但它仍然没有显示颜色。
http://jsfiddle.net/TbrtD/
.vendorListHeading {
background-color: #1a4567;
color: white;
-webkit-print-color-adjust: exact;
}
<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
<table class="table" style="margin-bottom: 0px;">
<thead>
<tr class="vendorListHeading" style="">
<th>Date</th>
<th>PO Number</th>
<th>Term</th>
<th>Tax</th>
<th>Quote Number</th>
<th>Status</th>
<th>Account Mgr</th>
<th>Shipping Method</th>
<th>Shipping Account</th>
<th style="width: 184px;">QA</th>
<th id="referenceSO">Reference</th>
<th id="referenceSO" style="width: 146px;">End-User Name</th>
<th id="referenceSO" style="width: 118px;">End-User's PO</th>
<th id="referenceSO" style="width: 148px;">Tracking Number</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>22</td>
<td>20130000</td>
<td>Jim B.</td>
<td>22</td>
<td>510 xxx yyyy</td>
<td>zznn@abc.co</td>
<td>PDF</td>
<td>12/23/2012</td>
<td>Approved</td>
<td>PDF</td>
<td id="referenceSO">12/23/2012</td>
<td id="referenceSO">Approved</td>
</tr>
</tbody>
</table>
</div>
对于那些使用BOOTSTRAP.CSS，这是修复!
我已经尝试了所有的解决方案，但都不管用。直到我发现bootstrap.css有一个超级烦人的@media print，它会重置你所有的颜色，背景色，阴影等等…
@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
所以要么从bootstrap。css(或bootstrap。min。css)中删除这个section
或者在你想要打印的页面的css中覆盖这些值
@media print {
body {
-webkit-print-color-adjust: exact;
}
.customClass{
//customCss + !important;
}
//more of your custom css
}
对于那些使用BOOTSTRAP.CSS，这是修复!
我已经尝试了所有的解决方案，但都不管用。直到我发现bootstrap.css有一个超级烦人的@media print，它会重置你所有的颜色，背景色，阴影等等…
@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
所以要么从bootstrap。css(或bootstrap。min。css)中删除这个section
或者在你想要打印的页面的css中覆盖这些值
@media print {
body {
-webkit-print-color-adjust: exact;
}
.customClass{
//customCss + !important;
}
//more of your custom css
}
在@media打印样式表中使用以下内容。
h1 {
background-color:#404040;
background-image:url("img/404040.png");
background-repeat:repeat;
box-shadow: inset 0 0 0 1000px #404040;
border:30px solid #404040;
height:0;
width:100%;
color:#FFFFFF !important;
margin:0 -20px;
line-height:0px;
}
这里有几点需要注意:
background-color is the absolute fallback and is there for posterity mostly.
background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not...
Set the box-shadow, if that doesn't work...
Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box.
Zero out the heigh/width depending on what you're controlling in the border attribute.
Font color will default to black unless you use !important
Set line-height to 0 to fix for the box not having physical dimension.
Make and host your own PNGs :-)
If the text in the block needs to wrap, put it in a div and position the div using position:relative; and remove line-height.
看我的小提琴有更详细的演示。
