blocks|key|373598|text|你确定这是一个css问题吗？谷歌上有一些关于这个问题的帖子：http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|373599|这可能与打印过程有关。在safari上，也是webkit，有一个复选框，可以在打印机对话框中打印背景图像和颜色。|373600|entityMap|0|LINK|mutability|MUTABLE|url|http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s^0|U|2G|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Are your sure this is a css issue ? There are some posts on google around this issue:
<a href="http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s" rel="noreferrer">http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s</a>

It may be related to the print process. On safari, which is webkit also, there is a checkbox to print background images and colors in the printer dialog.

blocks|key|155723|text|我只需要在background-color标签上添加!important属性就可以了，不需要webkit部分：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|155724|background-color:+#f5f5f5+!important;|155725|entityMap^0|Q|A|0|0|11|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I just needed to add the <code>!important</code> attribute onto the the background-color tag in order for it to show up, did not need the webkit part: 

<code>background-color: #f5f5f5 !important;</code>

blocks|key|373629|text|您的CSS必须如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|373630|@media+print+{
+++body+{
++++++-webkit-print-color-adjust:+exact;
+++}
}

.vendorListHeading+th+{
+++background-color:+#1a4567+!important;
+++color:+white+!important;+++
}|code-block|syntax|javascript|373631|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Your CSS must be like this:

<pre><code>@media print {
 body {
 -webkit-print-color-adjust: exact;
 }
}

.vendorListHeading th {
 background-color: #1a4567 !important;
 color: white !important; 
}
</code></pre>

blocks|key|373664|text|如果您使用的是bootstrap或任何其他第三方CSS，请确保仅在其上指定媒体屏幕，以便您可以在自己的CSS文件中控制打印媒体类型：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|373665|​|373666|<link+rel="stylesheet"+media="screen"+href="">|code-block|syntax|javascript|373667|373668|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

If you are using bootstrap or any other 3rd party CSS, make sure you specify the media screen only on it, so you have the control of the print media type in your own CSS files:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" media="screen" href=""&gt;</code></pre>
</div>
</div>

blocks|key|155830|text|如果下载引导程序时不带“打印媒体样式”选项，则不会出现此问题，并且不必在bootstrap.css文件中手动删除"@media+print“代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|155831|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you download Bootstrap without the "Print media styles" option, you will not have this problem and do not have to remove the "@media print" code manually in your bootstrap.css file.

blocks|key|155857|text|我双击我的外部CSS源文件，并将“media=”屏幕更改为media="print“，然后我的表格的所有边框都会显示出来|type|unstyled|depth|inlineStyleRanges|entityRanges|data|155858|试试这个：|155859|<link+rel="stylesheet"+media="print"+href="bootstrap.css"+/>

<link+rel="stylesheet"+media="screen"+href="bootstrap.css"+/>|code-block|syntax|javascript|155860|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I double load my external css source file and change the media="screen" to media="print" and all the borders for my table were shown

Try this :

<pre><code>&lt;link rel="stylesheet" media="print" href="bootstrap.css" /&gt;

&lt;link rel="stylesheet" media="screen" href="bootstrap.css" /&gt;
</code></pre>

blocks|key|373877|text|如果关闭了背景图形设置，则在打印时，Chrome将不会呈现背景色或其他几种样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|373878|这与css、@media或特异性无关。你可能可以绕过它，但是让chrome显示背景颜色和其他图形的最简单的方法是在More+Settings下正确地选中这个复选框。|373879|​|373880|📷|atomic|offset|length|373881|373882|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6fb78fe2e2831a46c3a19949db11d438.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]]]

Chrome will not render background-color, or several other styles, when printing if the background graphics setting is turned off.

This has nothing to do with css, @media, or specificity. You can probably hack your way around it, but the easiest way to get chrome to show the background-color and other graphics is to properly check this checkbox under More Settings.

<a href="https://i.stack.imgur.com/qc1g6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qc1g6.png" alt="enter image description here"></a>

blocks|key|155977|text|也可以使用box-shadow属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|155978|entityMap^0|5|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You can also use the <code>box-shadow</code> property.

blocks|key|155992|text|可以将内联css样式与!important一起使用。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|155993|<p+style="background:red!important">ABCD|code-block|syntax|javascript|155994|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use inline css styles with !important.
Eg.
<pre><code>&lt;p style=&quot;background:red!important&quot;&gt;ABCD&lt;/p&gt;
</code></pre>

I am trying to print a page. In that page I have given a table a background color.
When I view the print preview in chrome its not taking on the background color property...

So I tried this property:

<pre><code>-webkit-print-color-adjust: exact; 
</code></pre>

but still its not showing the color.

<a href="http://jsfiddle.net/TbrtD/" rel="noreferrer">http://jsfiddle.net/TbrtD/</a>

<pre><code>.vendorListHeading {
 background-color: #1a4567;
 color: white;
 -webkit-print-color-adjust: exact; 
}


&lt;div class="bs-docs-example" id="soTable" style="padding-top: 10px;"&gt;
 &lt;table class="table" style="margin-bottom: 0px;"&gt;
 &lt;thead&gt;
 &lt;tr class="vendorListHeading" style=""&gt;
 &lt;th&gt;Date&lt;/th&gt;
 &lt;th&gt;PO Number&lt;/th&gt;
 &lt;th&gt;Term&lt;/th&gt;
 &lt;th&gt;Tax&lt;/th&gt;
 &lt;th&gt;Quote Number&lt;/th&gt;
 &lt;th&gt;Status&lt;/th&gt;
 &lt;th&gt;Account Mgr&lt;/th&gt;
 &lt;th&gt;Shipping Method&lt;/th&gt;
 &lt;th&gt;Shipping Account&lt;/th&gt;
 &lt;th style="width: 184px;"&gt;QA&lt;/th&gt;
 &lt;th id="referenceSO"&gt;Reference&lt;/th&gt;
 &lt;th id="referenceSO" style="width: 146px;"&gt;End-User Name&lt;/th&gt;
 &lt;th id="referenceSO" style="width: 118px;"&gt;End-User's PO&lt;/th&gt;
 &lt;th id="referenceSO" style="width: 148px;"&gt;Tracking Number&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr class=""&gt;
 &lt;td&gt;22&lt;/td&gt;
 &lt;td&gt;20130000&lt;/td&gt;
 &lt;td&gt;Jim B.&lt;/td&gt;
 &lt;td&gt;22&lt;/td&gt;
 &lt;td&gt;510 xxx yyyy&lt;/td&gt;
 &lt;td&gt;zznn@abc.co&lt;/td&gt;
 &lt;td&gt;PDF&lt;/td&gt;
 &lt;td&gt;12/23/2012&lt;/td&gt;
 &lt;td&gt;Approved&lt;/td&gt;
 &lt;td&gt;PDF&lt;/td&gt;
 &lt;td id="referenceSO"&gt;12/23/2012&lt;/td&gt;
 &lt;td id="referenceSO"&gt;Approved&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
&lt;/div&gt;
</code></pre>

Background color not showing in print preview

我正在试着打印一页。在该页中，我为表格指定了背景颜色。当我在chrome中查看打印预览时，它不会显示背景颜色属性...所以我尝试了这个属性：-webkit-print-color-adjust: exact; 但它仍然没有显示出颜色。.vendorListHeading {  background-color: #1a...

问背景色未在打印预览中显示
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景色未在打印预览中显示EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景色未在打印预览中显示
EN