打印预览中不显示背景色

我正在试着打印一页。在该页中，我给一个表设置了背景色。当我在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>

当前回答

如果你正在使用引导。只需在自定义CSS文件中使用此代码。引导删除打印预览中的所有颜色。

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

2018-10-23 04:33:59

其他回答

你可以从bootstrap web下载bootstrap 4 CSS，并查看底部代码看看代码在哪里

删除这个CSS样式因为它覆盖了你的CSS颜色表样式

2022-12-13 17:15:36

最好的解决方案，如果你正在使用bootstrap，所以只做一件事，删除@media打印{}所有代码在此。并在打印预览时从更多设置中启用背景图形。

2019-01-25 10:47:35

你的CSS必须是这样的:

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}

2015-08-06 22:02:53

我只需要在background-color标签上添加!important属性，以便它显示出来，不需要webkit部分:

Background-color: #f5f5f5 !

2015-02-19 16:59:18

在@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.

看我的小提琴有更详细的演示。

2013-05-24 16:08:09

打印预览中不显示背景色

推荐文章

标签

最新文章