blocks|key|1150110|text|如果用户在他们的打印设置中关闭了“打印背景颜色和图像”，任何CSS都不会覆盖它，所以一定要考虑到这一点。这是默认设置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1150111|一旦设置好，它将打印背景颜色和图像，你所拥有的就可以工作了。|1150112|它在不同的地方被发现。在IE9beta中，它位于打印->页面选项下的纸张选项中|1150113|在FireFox中，它位于“选项”下的“页面设置”“->格式&选项”选项卡中。|1150114|entityMap^0|1G|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|S|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|M|$]]

<p>IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. <strong>This is a default setting</strong>.</p>

<p>Once that is set so it will print background colours and images, what you have there will work.</p>

<p>It is found in different spots.
In IE9beta it's found in Print->Page Options under Paper options</p>

<p>In FireFox it's in Page Setup -> [Format &amp; Options] Tab under Options.</p>


blocks|key|3266983|text|要在Chrome中启用后台打印：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3266984|body+{
++-webkit-print-color-adjust:+exact+!important;
}|code-block|syntax|javascript|3266985|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|$]]

<p>To enable background printing in Chrome:</p>

<pre class="lang-css prettyprint-override"><code>body {
  -webkit-print-color-adjust: exact !important;
}
</code></pre>


blocks|key|1152697|text|明白了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1152698|CSS：|1152699|box-shadow:+inset+0+0+0+1000px+gold;|code-block|syntax|javascript|1152700|适用于所有框-包括表格单元格！|1152701|PDF打印机(如果要在Ubuntu上的Chrome+%2B+Firefox中对PDF打印机输出文件进行believed..?)|1152702|Only测试...|unordered-list-item|1152703|1152704|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Got it:</p>

<p>CSS: </p>

<pre><code>box-shadow: inset 0 0 0 1000px gold;
</code></pre>

<p>Works for all boxes - including table cells !!!  </p>

<ul>
<li>(If the PDF-printer output file is to be believed..?)</li>
<li>Only tested in Chrome + Firefox on Ubuntu...</li>
</ul>


blocks|key|1150206|text|试试这个，它对我在Google+Chrome上很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1150207|<style+media="print"+type="text/css">
++++.page+{
++++++++background-color:+white+!important;
++++}
</style>|code-block|syntax|javascript|1150208|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|$]]

<p>Try this, it worked for me on Google Chrome:</p>

<pre><code>&lt;style media="print" type="text/css"&gt;
    .page {
        background-color: white !important;
    }
&lt;/style&gt;
</code></pre>


blocks|key|1895687|text|在is+Not+enough中单独使用-webkit-print-color-adjust:+exact;+您必须使用带有属性的!important|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1895688|这是我在之后在chrome+上的打印预览，我在每个标签中添加了!important和color属性|1895689|​|1895690|📷|atomic|1895691|1895692|这是在添加!important之前在chrome+上打印预览|1895693|1895694|1895695|1895696|现在，要了解如何将!important转换为div的风格，请查看以下答案I'm+unable+to+inject+a+style+with+an+“!important”+rule|1895697|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/19c8c68bb2a40eb278c6b827419f8354.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/330b724a09c5b5aa991f9ff2b4852d26.png|2|LINK|MUTABLE|url|https://stackoverflow.com/a/40101192/4251431^0|1|D|1I|K|1|D|J|Y|1S|A|0|0|4|E|Z|V|A|16|5|0|0|1|0|0|1|0|1|0|0|0|1|0|0|3|P|5|5|A|0|0|1|0|0|1|0|1|1|0|0|1|0|0|2I|9|A|10|1I|2|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|D]|$9|1I|A|1J|B|D]|$9|1K|A|1L|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|D]|$9|1T|A|1U|B|D]]|E|@]|F|$]]|$1|I|3|J|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|E|@]|F|$]]|$1|K|3|L|5|M|7|1Y|8|@$9|1Z|A|20|B|C]]|E|@$9|21|A|22|1|23]]|F|$]]|$1|N|3|J|5|6|7|24|8|@$9|25|A|26|B|C]]|E|@]|F|$]]|$1|O|3|P|5|6|7|27|8|@$9|28|A|29|B|C]|$9|2A|A|2B|B|C]|$9|2C|A|2D|B|D]]|E|@]|F|$]]|$1|Q|3|J|5|6|7|2E|8|@$9|2F|A|2G|B|C]]|E|@]|F|$]]|$1|R|3|L|5|M|7|2H|8|@$9|2I|A|2J|B|C]]|E|@$9|2K|A|2L|1|2M]]|F|$]]|$1|S|3|J|5|6|7|2N|8|@$9|2O|A|2P|B|C]]|E|@]|F|$]]|$1|T|3|U|5|6|7|2Q|8|@$9|2R|A|2S|B|C]|$9|2T|A|2U|B|D]]|E|@$9|2V|A|2W|1|2X]]|F|$]]|$1|V|3|-4|5|6|7|2Y|8|@]|E|@]|F|$]]]|W|$X|$5|Y|Z|10|F|$11|12|13|-4]]|14|$5|Y|Z|10|F|$11|15|13|-4]]|16|$5|17|Z|18|F|$19|1A]]]]

<p><code>-webkit-print-color-adjust: exact;</code> <strong>alone <code>is Not enough</code></strong> 
you have to use <code>!important</code> with the attribute </p>

<p>this is printing preview on chrome <strong>after</strong> I added <code>!important</code> to each <code>background-color</code> and <code>color</code> attrubute in each tag</p>

<p><a href="https://i.stack.imgur.com/TByf4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TByf4.png" alt="printing preview on chrome"></a></p>

<p>and this is printing preview on chrome <strong>before</strong> adding <code>!important</code> </p>

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

<p>now, to know how to <code>inject</code> <code>!important</code> to div's style, check out this answer <a href="https://stackoverflow.com/a/40101192/4251431">I'm unable to inject a style with an “!important” rule</a></p>


blocks|key|1152756|text|两个有效的解决方案(至少在现代Chrome上--还没有测试过)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1152757|1152758|！重要的是在常规的css声明中起作用(甚至在@media+print中都不起作用)|ordered-list-item|1152759|使用svg|1152760|1152761|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|M|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|N|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|J|$]]

<p>Two solutions that work (on modern Chrome at least - haven't tested beyond):</p>

<ol>
<li>!important right in the regular css declaration works (not even in the @media print)</li>
<li>Use svg</li>
</ol>


blocks|key|3267306|text|如果您希望创建“打印机友好”页面，我建议您在@media+print+CSS中添加"!important“。这会鼓励大多数浏览器打印您的背景图像、颜色等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3267307|示例：|3267308|background:#3F6CAF+url('example.png')+no-repeat+top+left+!important;
background-color:+#3F6CAF+!important;|code-block|syntax|javascript|3267309|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|$]]

<p>If you are looking to create "printer friendly" pages, I recommend adding "!important" to your @media print CSS. This encourages most browsers to print your background images, colors, etc.</p>

<p>EXAMPLES:</p>

<pre><code>background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
</code></pre>


blocks|key|3267216|text|还有另一个技巧，你可以在没有激活其他帖子中提到的打印边框选项的情况下执行。因为边框是打印出来的，所以你可以用这个技巧来模拟纯色背景：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3267217|.your-background:before+{
++content:+'';
++display:+block;
++position:+absolute;
++top:+0;
++right:+0;
++left:+0;
++z-index:+-1;
++border-bottom:+1000px+solid+#eee;+/*+Make+it+fit+your+needs+*/
}|code-block|syntax|javascript|3267218|通过将类添加到您的元素来激活它：|3267219|<table>
++<tr>
++++<td+class="your-background">&nbsp;</td>
++++<td+class="your-background">&nbsp;</td>
++++<td+class="your-background">&nbsp;</td>
++</tr>
</table>|3267220|虽然这需要一些额外的代码和一些额外的注意来使背景颜色可见，但这仍然是我所知的唯一解决方案。|3267221|请注意，除了display:+block;或display:+table-cell;之外，这种攻击不适用于其他元素，因此例如<table+class="your-background">和<tr+class="your-background">将不起作用。|CODE|3267222|我们使用它来获取所有浏览器中的背景色(仍然需要IE9%2B+)。|3267223|entityMap^0|10|U|0|0|0|G|0|0|0|19|0|0|3K|6|F|M|K|1Q|V|2M|S|0|0|U|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|S]|$9|1D|A|1E|B|S]|$9|1F|A|1G|B|S]|$9|1H|A|1I|B|S]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|W|$]]

<p>There is another trick you can do <strong>without</strong> activating the print border option mentioned in other posts. Since borders <em>are</em> printed you can simulate solid background-colors with this hack:</p>

<pre><code>.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
</code></pre>

<p>Activate it by adding the class to your element:</p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td class="your-background"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td class="your-background"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td class="your-background"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.</p>

<p>Notice this hack won't work on elements other than <code>display: block;</code> or <code>display: table-cell;</code>, so for example <code>&lt;table class="your-background"&gt;</code> and <code>&lt;tr class="your-background"&gt;</code> won't work.</p>

<p>We use this to get background colors in all browsers (still, IE9+ required).</p>


blocks|key|1152898|text|对于chrome，我已经使用了这样的东西，它对我来说是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1152899|在body标签中，|1152900|<body+style="-webkit-print-color-adjust:+exact;">+</body>|code-block|syntax|javascript|1152901|或者对于一个特定的元素，假设你有表格，你想填充一个td，也就是一个单元格，|1152902|<table><tr><td+style="-webkit-print-color-adjust:+exact;"></tr></table>|1152903|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>For chrome, I have used something like this and it worked out for me.</p>

<p>Within the body tag,</p>

<pre><code>&lt;body style="-webkit-print-color-adjust: exact;"&gt; &lt;/body&gt;
</code></pre>

<p>Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,</p>

<pre><code>&lt;table&gt;&lt;tr&gt;&lt;td style="-webkit-print-color-adjust: exact;"&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>


blocks|key|4677759|text|尽管!important的使用通常不受欢迎，但这是bootstrap.css中令人不快的代码，它阻止使用background-color打印表行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4677760|.table+td,
.table+th+{
++++background-color:+#fff+!important;
}|code-block|syntax|javascript|4677761|让我们假设您正在尝试设置以下HTML的样式：|4677762|<table+class="table">
++++<tr+class="highlighted">
++++++<td>Name</td>
++++++<td>School</td>
++++++<td>Height</td>
++++++<td>Weight</td>
++++</tr>
</table>|4677763|要覆盖此CSS，请在样式表中放置以下(更具体的)规则：|4677764|@media+print+{
++++table+tr.highlighted+>+td+{
++++++++background-color:+rgba(247,+202,+24,+0.3)+!important;
++++}
}|4677765|这是因为规则比bootstrap默认值更具体。|4677766|entityMap^0|2|A|P|D|1G|G|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|18|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|V|$]]

<p>Despite <code>!important</code> usage being generally frowned upon, this is the offending code in <code>bootstrap.css</code> which prevents table rows from being printed with <code>background-color</code>.</p>

<pre><code>.table td,
.table th {
    background-color: #fff !important;
}
</code></pre>

<p>Let's assume you are trying to style the following HTML:</p>

<pre><code>&lt;table class="table"&gt;
    &lt;tr class="highlighted"&gt;
      &lt;td&gt;Name&lt;/td&gt;
      &lt;td&gt;School&lt;/td&gt;
      &lt;td&gt;Height&lt;/td&gt;
      &lt;td&gt;Weight&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>To override this CSS, place the following (more specific) rule in your stylesheet:</p>

<pre><code>@media print {
    table tr.highlighted &gt; td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}
</code></pre>

<p>This works because the rule is more specific than the bootstrap default.</p>


blocks|key|1900203|text|我发现了这个问题，因为我在Google+Apps脚本中尝试从html输出生成PDF时遇到了类似的问题，其中背景颜色也没有“打印”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1900204|当然，-webkit-print-color-adjust:exact;和!important解决方案不起作用，但box-shadow:+inset+0+0+0+1000px+gold;确实起作用了……太棒了，非常感谢:)|offset|length|style|CODE|1900205|entityMap^0|0|3|X|11|A|1L|10|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|I|$]]

<p>Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed". </p>

<p>The <code>-webkit-print-color-adjust:exact;</code> and <code>!important</code> solutions of course did not work, but the <code>box-shadow: inset 0 0 0 1000px gold;</code> did... great hack, thank you very much  :)</p>


blocks|key|3267352|text|我想从最近的打印css体验中添加最近和2015年的相关帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3267353|无论“打印”对话框的设置如何，都可以打印背景和颜色。|3267354|为此，我必须结合使用!important和-webkit-print-color-adjust:exact+!important来正确打印背景和颜色。|offset|length|style|BOLD|3267355|此外，在声明颜色时，我发现最顽固的区域需要直接定义到您的目标。例如：|3267356|<div+class="foo">
+<p+class="red">Some+text</p>
</div>|code-block|syntax|javascript|3267357|和你的CSS：|3267358|.red+{color:red+!important}
.foo+{color:red+!important}+/*+<--+This+won't+always+paint+the+p+*/|3267359|entityMap^0|0|0|A|A|L|17|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@$F|Z|G|10|H|I]|$F|11|G|12|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

<p>Thought I'd add a recent and 2015 relevant aid from a recent print css experience. </p>

<p>Was able to print backgrounds and colors regardless of print dialog box settings. </p>

<p>To do this, I had to use a combination of <strong><em>!important</em></strong> &amp; <strong><em>-webkit-print-color-adjust:exact !important</em></strong> to get background and colors to print properly. </p>

<p>Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:</p>

<pre><code>&lt;div class="foo"&gt;
 &lt;p class="red"&gt;Some text&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>And your CSS:</p>

<pre><code>.red {color:red !important}
.foo {color:red !important} /* &lt;-- This won't always paint the p */
</code></pre>


blocks|key|1150397|text|在2016/10年度，在Chrome，Firefox，Opera和Edge上测试并运行。应该可以在任何浏览器上运行，并且应该总是看起来像预期的那样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1150398|好的，我做了一个跨浏览器打印背景色的小实验。只需复制、粘贴和享受！|1150399|下面是一个完整的可打印HTML页面，用于引导：|1150400|<!DOCTYPE+html>
<html>

<head>
<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style+type="text/css">

++++/*+Both+z-index+are+resolving+recursive+element+containment+*/
++++[background-color]+{
++++++++z-index:+0;
++++++++position:+relative;
++++++++-webkit-print-color-adjust:+exact+!important;
++++}

++++[background-color]+canvas+{
++++++++display:+block;
++++++++position:absolute;
++++++++z-index:+-1;
++++++++top:+0;
++++++++left:+0;
++++++++width:+100%25;
++++++++height:+100%25;
++++}

</style>
</head>


<body>

++++
++++<div+class="container">

++++<div+class="row">
++++++++<div+class="col-xs-6">
++++++++++++<div+background-color="#A400C1">
++++++++++++++++<h4>
++++++++++++++++Hey...+this+works+!
++++++++++++++++</h4>
++++++++++++++++<div+background-color="#0068C1">
++++++++++++++++++++<p>
++++++++++++++++++++Ohh...+this+works+recursive+too+!!
++++++++++++++++++++<div+background-color="green"+style="width:+80px;+height:+60px">
++++++++++++++++++++++++Any+size+!!
++++++++++++++++++++</div>
++++++++++++++++++++</p>
++++++++++++++++</div>
++++++++++++</div>
++++++++</div>

++++++++<div+class="col-xs-6">
++++++++++++<div+background-color="#FFCB83"+style="height:+200px">
++++++++++++++++Some+content...
++++++++++++</div>
++++++++</div>

++++</div>


<script>
++++var+containers+=+document.querySelectorAll("[background-color]");

++++for+(i+=+0;+i+<+containers.length;+i%2B%2B)
++++{
++++++++//+Element
++++++++var+container+=+containers[i];
++++++++container.insertAdjacentHTML('beforeend',+'<canvas+id="canvas-'+%2B+i+%2B+'"></canvas>');

++++++++//+Color
++++++++var+color+=+container.getAttribute("background-color");
++++++++container.style.backgroundColor+=+color;

++++++++//+Inner+Canvas
++++++++var+canvas+=+document.getElementById("canvas-"+%2B+i);
++++++++canvas.width+=+container.offsetWidth;
++++++++canvas.height+=+container.offsetHeight;
++++++++var+ctx+=+canvas.getContext("2d");
++++++++ctx.fillStyle+=+color;
++++++++ctx.fillRect(0,+0,+canvas.width,+canvas.height);
++++}

++++window.print();
</script>


</body>

</html>|code-block|syntax|javascript|1150401|entityMap^0|B|W|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|V|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p><strong>Tested and Working</strong> over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.</p>

<p>Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste &amp; enjoy!</p>

<p>Here it is a full printable HTML page for bootstrap:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;style type="text/css"&gt;

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

&lt;/style&gt;
&lt;/head&gt;

&lt;!-- CONTENT --&gt;
&lt;body&gt;

    &lt;!-- PRINT ROW BLOCK --&gt;
    &lt;div class="container"&gt;

    &lt;div class="row"&gt;
        &lt;div class="col-xs-6"&gt;
            &lt;div background-color="#A400C1"&gt;
                &lt;h4&gt;
                Hey... this works !
                &lt;/h4&gt;
                &lt;div background-color="#0068C1"&gt;
                    &lt;p&gt;
                    Ohh... this works recursive too !!
                    &lt;div background-color="green" style="width: 80px; height: 60px"&gt;
                        Any size !!
                    &lt;/div&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="col-xs-6"&gt;
            &lt;div background-color="#FFCB83" style="height: 200px"&gt;
                Some content...
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt;


&lt;script&gt;
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i &lt; containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '&lt;canvas id="canvas-' + i + '"&gt;&lt;/canvas&gt;');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
&lt;/script&gt;


&lt;/body&gt;

&lt;/html&gt;
</code></pre>


blocks|key|1900000|text|我找到的最好的“解决方案”是提供一个突出的“打印”按钮或链接，弹出一个小对话框，大胆、简短、简洁地解释他们需要调整打印机设置(使用ABC+123项目符号说明)以启用背景和图像打印。这对我来说是非常成功的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1900001|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|$]]

<p>Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing.  This has been very successful for me.</p>


blocks|key|1152739|text|在某些情况下(没有任何内容的块，但有背景)，可以使用边框覆盖它，每个块单独使用边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1152740|例如：|1152741|.colored+{
++background:+#000;
++border:+1px+solid+#ccc;
++width:+8px;
++height:+8px;
}

@media+print+{
++.colored+div+{
++++border:+4px+solid+#000;
++++width:+0;
++++height:+0;
++}
}|code-block|syntax|javascript|1152742|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|$]]

<p>In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.</p>

<p>For example:</p>

<pre><code>.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
</code></pre>


blocks|key|1900394|text|我刚刚将此代码片段添加到打印媒体查询中，所有样式都已按预期应用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1900395|+++++++*+{
++++++++color-adjust:+exact!important;++
++++++++-webkit-print-color-adjust:+exact!important;+
+++++++++print-color-adjust:+exact!important;
++++++}|code-block|syntax|javascript|1900396|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|$]]

<p>I just added to the print media query this snippet and all style was applied as intended:</p>
<pre><code>       * {
        color-adjust: exact!important;  
        -webkit-print-color-adjust: exact!important; 
         print-color-adjust: exact!important;
      }
</code></pre>


blocks|key|1900416|text|*+{
++-webkit-print-color-adjust:+exact;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1900417|另外，启用>从>+Inspact+>更多工具>渲染模拟CSS媒体。非常详细的步骤可以在here上找到。|unstyled|offset|length|1900418|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode^0|0|17|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre class="lang-css prettyprint-override"><code>* {
  -webkit-print-color-adjust: exact;
}
</code></pre>
<p>Also, Enable &gt; Emulate CSS Media From &gt; Inspact &gt; More Tools &gt; Renders. Very detailed steps can be found <a href="https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode">here</a>.</p>


blocks|key|3267184|text|您可以使用标签canvas并“绘制”背景，这适用于IE9、Gecko和Webkit。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3267185|entityMap^0|7|6|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|$]]

<p>You can use the tag <code>canvas</code> and "draw" the background, which work on IE9, Gecko and Webkit.</p>


blocks|key|4677460|text|如果你不介意使用图像而不是背景颜色(或者使用你的背景颜色的图像)，下面的解决方案在我的FireFox，Chrome，甚至IE中都有效，没有任何覆盖。将图像设置在页面上的某个位置，并将其隐藏，直到用户打印。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4677461|带有背景图像的页面上的html|4677462|<img+src="someImage.png"+class="background-print-img">|code-block|syntax|javascript|4677463|Css|4677464|.background-print-img{
++++display:+none;
}

@media+print{
++++.background-print-img{
++++++++background:red;
++++++++display:+block;
++++++++width:100%25;
++++++++height:100%25;
++++++++position:absolute;
++++++++left:0;
++++++++top:0;
++++++++z-index:-10;
++++}|4677465|}|4677466|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.</p>

<p>The html on the page with the background image</p>

<pre><code>&lt;img src="someImage.png" class="background-print-img"&gt;
</code></pre>

<p>The Css</p>

<pre><code>.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }
</code></pre>

<p>}</p>


blocks|key|1895726|text|Do+not+set+the+background-color+Do+the+print+stylesheet。只需在普通css文件中设置属性，它就可以正常工作:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1895727|查看此示例：The+Ultimate+Print+HTML+Template+with+Header+&+Footer|1895728|演示：The+Ultimate+Print+HTML+Template+with+Header+&+Footer+Demo|1895729|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a|1|https://next.plnkr.co/edit/lWk6Yd?preview=&source=post_page---------------------------^0|3|3|F|G|0|6|1H|0|0|3|1M|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|Z|8|@]|E|@$9|10|A|11|1|12]]|F|$]]|$1|I|3|J|5|6|7|13|8|@]|E|@$9|14|A|15|1|16]]|F|$]]|$1|K|3|-4|5|6|7|17|8|@]|E|@]|F|$]]]|L|$M|$5|N|O|P|F|$Q|R]]|S|$5|N|O|P|F|$Q|T]]]]

<p>Do <strong>not</strong> set the <code>background-color</code> inside the print stylesheet. Just set the attribute in the normal css file and it works fine :)</p>

<p>Checkout this example: <a href="https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a" rel="nofollow noreferrer">The Ultimate Print HTML Template with Header &amp; Footer</a></p>

<p>Demo: <a href="https://next.plnkr.co/edit/lWk6Yd?preview=&amp;source=post_page---------------------------" rel="nofollow noreferrer">The Ultimate Print HTML Template with Header &amp; Footer Demo</a></p>


blocks|key|4677822|text|tr.group-title+{
++padding-top:+.5rem;
++border-top:+2rem+solid+lightgray;
}

tr.group-title+>+td+h5+{
++margin-top:+-1.9rem;
}

++++++++++<tbody>
++++++++++++<tr+class="group-title">
++++++++++++++<td+colspan="6">
++++++++++++++++<h5+align="center">{{+group.title+}}</h5>
++++++++++++++</td>
++++++++++++</tr>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4677823|适用于Chrome和Edge|unstyled|4677824|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title &gt; td h5 {
  margin-top: -1.9rem;
}

          &lt;tbody&gt;
            &lt;tr class=&quot;group-title&quot;&gt;
              &lt;td colspan=&quot;6&quot;&gt;
                &lt;h5 align=&quot;center&quot;&gt;{{ group.title }}&lt;/h5&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
</code></pre>
<p>Works in Chrome and Edge</p>


blocks|key|4677839|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4677840|++++body{
++++++++background-color:+#E5FFE5;
++++}
++++.bg_print{
+++++++border-bottom:+30px+solid+#FFCC33;
++++}
++++.orange_bg_print_content{
++++++++margin-top:+-25px;
++++++++padding:+0+10px;
++++}|code-block|syntax|javascript|4677841|++++<div+class="bg_print">
++++</div>
++++<div+class="orange_bg_print_content">
++++++++My+Content+With+Background!
++++</div>|4677842|4677843|已在Chrome、Firefox和Edge中测试并工作...|4677844|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    body{
        background-color: #E5FFE5;
    }
    .bg_print{
       border-bottom: 30px solid #FFCC33;
    }
    .orange_bg_print_content{
        margin-top: -25px;
        padding: 0 10px;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="bg_print"&gt;
    &lt;/div&gt;
    &lt;div class="orange_bg_print_content"&gt;
        My Content With Background!
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Tested and works in Chrome and Firefox and Edge...</p>


<p>I'm new here at this company and we have a product that uses miles of css. I'm attempting to make a printable stylesheet for our app but I'm having issues with <code>background-color</code> in <code>@media print</code>.</p>

<pre class="lang-css prettyprint-override"><code>    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }
</code></pre>

<p>Everything else works, I can modify the borders and such but <code>background-color</code> won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before. </p>


CSS @media print issues with background-color;

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我是这个公司的新人，我们有一个使用里程css的产品。我试图为我们的应用程序制作一个可打印的样式表，但我在@media print中使用background-color遇到了问题。    @media print {      #header{display:none;}      #adwrapper{display:none;}      td {        border-bottom: s

问CSS @media打印背景色问题；
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS @media打印背景色问题；EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS @media打印背景色问题；
EN