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

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. This is a default setting.

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

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

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

entityMap|blocks|key|9i60v|text|我找到的最好的“解决方案”是提供一个突出的“打印”按钮或链接，弹出一个小对话框，大胆、简短、简洁地解释他们需要调整打印机设置(使用ABC+123项目符号说明)以启用背景和图像打印。这对我来说是非常成功的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

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.

entityMap|blocks|key|f7p3f|text|要在Chrome中启用后台打印，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|kt1g|body+{
++-webkit-print-color-adjust:+exact+!important;
}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

To enable background printing in Chrome:

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

entityMap|blocks|key|fbvea|text|明白了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bunne|CSS：|b2j45|box-shadow:+inset+0+0+0+1000px+gold;|code-block|syntax|javascript|99jmu|适用于所有框-包括表格单元格！|fdf97|(如果PDF打印机输出文件可信..？)|esn9f|仅在Ubuntu上的Chrome+%2B+Firefox中测试...^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Q|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|R|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|S|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|U|9|@]|A|@]|B|$]]]]

Got it:

CSS: 

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

Works for all boxes - including table cells !!! 

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

entityMap|blocks|key|9fhn6|text|试试这个，它对我在Google+Chrome上很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7v1vg|.page+{
++++++++background-color:+white+!important;
++++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Try this, it worked for me on Google Chrome:

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

entityMap|blocks|key|bkfs8|text|在某些情况下(没有任何内容的块，但有背景)，它可以使用边框覆盖，分别用于每个块。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ffiqb|例如：|7th39|.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^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

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

For example:

<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>

entityMap|blocks|key|frcdu|text|两个有效的解决方案(至少在现代Chrome上--还没有测试过)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1inb7|！重要的权利在常规的css声明中工作(甚至在@media打印中也不起作用)|ordered-list-item|30cr7|使用svg^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$]]|$2|F|4|G|6|E|8|J|9|@]|A|@]|B|$]]]]

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

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

entityMap|blocks|key|dborn|text|您可以使用标记canvas和“绘制”的背景，这是工作在IE9，壁虎和Webkit。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

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

entityMap|blocks|key|eq2qo|text|你还可以玩另一个把戏没有激活其他帖子中提到的打印边框选项。自边界有你可以用这个技巧来模拟纯色背景：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7or0d|.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|cajke|通过将类添加到元素来激活它：|6sbka|虽然这需要一些额外的代码和一些额外的注意来使背景颜色可见，但这仍然是我所知的唯一解决方案。|a9i6r|请注意，此hack将不会在元素上工作，而不是display:+block;或者display:+table-cell;，所以举个例子+and++won't+work.|a9m5k|5ct1j|​|7qe9f|We+use+this+to+get+background+colors+in+all+browsers+(still,+IE9%2B+required).|offset|length|style|CODE|61r0f|6gtt9|1tnes^0|0|0|0|0|0|0|0|0|24|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Z|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|10|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|11|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|12|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|13|9|@]|A|@]|B|$]]|$2|N|4|-4|6|7|8|14|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|15|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|16|9|@$S|17|T|18|U|V]]|A|@]|B|$]]|$2|W|4|-4|6|7|8|19|9|@]|A|@]|B|$]]|$2|X|4|-4|6|7|8|1A|9|@]|A|@]|B|$]]|$2|Y|4|P|6|7|8|1B|9|@]|A|@]|B|$]]]]

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

<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>

Activate it by adding the class to your element:

<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>

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

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.

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

entityMap|blocks|key|7il5p|text|如果你不介意使用图像而不是背景颜色(或者使用你的背景颜色的图像)，下面的解决方案在我的FireFox，Chrome，甚至IE中都有效，没有任何覆盖。将图像设置在页面上的某个位置，并将其隐藏，直到用户打印。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4hkbh|带有背景图像的页面上的html|b657o|Css|1nc4h|.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;
++++}|code-block|syntax|javascript|1smq6|}^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|Q|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

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.

The html on the page with the background image

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

The Css

<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>

}

entityMap|blocks|key|7r86|text|如果您希望创建“打印机友好”页面，我建议您在@media+print+CSS中添加"!important“。这会鼓励大多数浏览器打印您的背景图像、颜色等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c1565|示例：|a5rea|background:#3F6CAF+url('example.png')+no-repeat+top+left+!important;
background-color:+#3F6CAF+!important;|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

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.

EXAMPLES:

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

entityMap|blocks|key|fb7g8|text|我想从最近的打印css体验中添加最近和2015年的相关帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ato8v|无论“打印”对话框的设置如何，都可以打印背景和颜色。|culg1|要做到这一点，我必须结合使用！重要&-webkit-print-color-adjust:精确！重要若要正确打印背景和颜色，请执行以下操作。|7sq9t|此外，在声明颜色时，我发现最顽固的区域需要直接针对您的目标进行定义。例如：|ap503|Some+text|code-block|syntax|javascript|261em|和你的CSS：|2pp7q|.red+{color:red+!important}
.foo+{color:red+!important}+/*+<--+This+won't+always+paint+the+p+*/^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|T|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|U|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|V|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|W|9|@]|A|@]|B|$]]|$2|P|4|Q|6|K|8|X|9|@]|A|@]|B|$L|M]]]]

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

Was able to print backgrounds and colors regardless of print dialog box settings. 

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

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

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

And your CSS:

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

entityMap|blocks|key|5vct|text|我发现了这个问题，因为我在Google+Apps脚本中尝试从html输出生成PDF时遇到了类似的问题，其中背景颜色也没有“打印”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|cho67|The+-webkit-print-color-adjust:exact;和!important解决方案当然不起作用，但box-shadow:+inset+0+0+0+1000px+gold;有没有..。太棒了，非常感谢:)^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

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". 

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 :)

entityMap|blocks|key|4431m|text|对于chrome，我使用了这样的东西，它对我来说是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c6m3t|在body标签中，|52bsl|或者对于一个特定的元素，假设你有一个表格，你想填充一个td，也就是一个单元格，^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

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

Within the body tag,

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

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

<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>

entityMap|blocks|key|e9lel|text|测试和工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dg89i|在2016/10年超过Chrome，Firefox，Opera和Edge。应该可以在任何浏览器上工作，并且应该总是看起来像预期的那样。|9toab|好的，我做了一个跨浏览器打印背景色的小实验。只需复制、粘贴和享受！|583cd|下面是一个完整的可打印HTML页面，用于引导：|fqu16|/*+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;
++++}







++++
++++

++++
++++++++
++++++++++++
++++++++++++++++
++++++++++++++++Hey...+this+works+!
++++++++++++++++
++++++++++++++++
++++++++++++++++++++
++++++++++++++++++++Ohh...+this+works+recursive+too+!!
++++++++++++++++++++
++++++++++++++++++++++++Any+size+!!
++++++++++++++++++++
++++++++++++++++++++
++++++++++++++++
++++++++++++
++++++++

++++++++
++++++++++++
++++++++++++++++Some+content...
++++++++++++
++++++++

++++



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

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

++++++++//+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();|code-block|syntax|javascript^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|R|9|@]|A|@]|B|$L|M]]]]

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

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

Here it is a full printable HTML page for bootstrap:

<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>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/41565317ee8bd6ab771966a6fa4a2c17.png|imageAlt|1|https://ask.qcloudimg.com/http-save/actteam/83e39f58062fb2512ea0b3981793bb66.png|blocks|key|ejmp9|text|-webkit-print-color-adjust:+exact;独自一人is+Not+enough你必须使用!important使用属性|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|aqgd0|这是在chrome上打印预览!important之后background-color和color每个标签中的属性​|7ci1u|fbkj7|?|atomic|cusra|这是chrome上的打印预览之前添加!important|eb4s9|7budp|现在，要知道如何inject+++!important要使用div的风格，请查看以下答案我无法使用“！important”规则注入样式^0|12|D|0|0|0|0|1|0|0|0|0|1|1|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]|A|$2|3|4|5|6|$7|B|9|-4]]]|C|@$D|E|F|G|2|H|I|10|J|@$K|11|L|12|M|N]]|O|@]|6|$]]|$D|P|F|Q|2|H|I|13|J|@]|O|@]|6|$]]|$D|R|F|-4|2|H|I|14|J|@]|O|@]|6|$]]|$D|S|F|T|2|U|I|15|J|@]|O|@$K|16|L|17|D|18]]|6|$]]|$D|V|F|W|2|H|I|19|J|@]|O|@]|6|$]]|$D|X|F|T|2|U|I|1A|J|@]|O|@$K|1B|L|1C|D|1D]]|6|$]]|$D|Y|F|Z|2|H|I|1E|J|@]|O|@]|6|$]]]]

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

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

<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>

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

<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>

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>

entityMap|blocks|key|qdak|text|尽管!important用法通常是不受欢迎的，这是bootstrap.css来防止打印表格行background-color。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9mmuc|.table+td,
.table+th+{
++++background-color:+#fff+!important;
}|code-block|syntax|javascript|1i26l|假设您正在尝试设置以下HTML的样式：|96rda|Name
++++++School
++++++Height
++++++Weight|9pike|要覆盖此CSS，请在样式表中放置以下(更具体的)规则：|7ijlg|@media+print+{
++++table+tr.highlighted+>+td+{
++++++++background-color:+rgba(247,+202,+24,+0.3)+!important;
++++}
}|crvt|这是因为规则比bootstrap默认值更具体。^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|S|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|T|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|U|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|V|9|@]|A|@]|B|$]]|$2|N|4|O|6|E|8|W|9|@]|A|@]|B|$F|G]]|$2|P|4|Q|6|7|8|X|9|@]|A|@]|B|$]]]]

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

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

Let's assume you are trying to style the following HTML:

<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>

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

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

This works because the rule is more specific than the bootstrap default.

entityMap|blocks|key|aqglj|text|做注释设置background-color在打印样式表中。只需在普通css文件中设置属性，它就可以正常工作:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2q9ap|查看此示例：带有页眉和页脚的终极打印HTML模板|2jlqk|演示：带有页眉和页脚的终极打印HTML模板演示^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

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

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>

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>

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

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

++++++++++
++++++++++++
++++++++++++++
++++++++++++++++{{+group.title+}}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|fiboh|适用于Chrome和Edge|unstyled^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$C|D]]|$2|E|4|F|6|G|8|I|9|@]|A|@]|B|$]]]]

<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>
Works in Chrome and Edge

entityMap|blocks|key|32eaq|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c3cth|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|l04d|My+Content+With+Background!|8c974|ct8i7|在Chrome、Firefox和Edge中测试并工作...^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|N|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|J|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|Q|9|@]|A|@]|B|$]]]]

<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>

Tested and works in Chrome and Firefox and Edge...

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

<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>

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.

CSS @media print issues with background-color;

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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