CSS 如何让 Firefox 打印背景颜色样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/764520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I Make Firefox Print a Background-Color Style?
提问by machineghost
I have some simple CSS:
我有一些简单的 CSS：
#someElement {
background-color:black;
color:white;
}
It looks ok in the browser, but when I go to print it in Firefox it comes out as black text on a white background. I imagine this is some sort of ink-saving feature, but is there any way around it?
它在浏览器中看起来不错，但是当我在 Firefox 中打印它时，它显示为白色背景上的黑色文本。我想这是某种节省墨水的功能，但有什么办法可以解决吗？
回答by Daniel A. White
Its a browser setting. There is nothing you can do in your CSS. In Windows - File > Page Setup... > Print Background.
它的浏览器设置。在 CSS 中您无能为力。在 Windows 中 - File > Page Setup... > Print Background.
回答by timing
I found a solution, it's a bit hacky, but with CSS pseudo elements you can create backgrounds using fat borders. Borders are printed even when "printing backgrounds" is off, just make them really thick! One note, Firefox sets all white font colors to black, so when you create a fake black background, Firefox still makes the text black, rendering the text invisible. Anyway here it is:
我找到了一个解决方案，它有点笨拙，但是使用 CSS 伪元素，您可以使用粗边框创建背景。即使“打印背景”关闭，边框也会打印，只需将它们做得非常厚！需要注意的是，Firefox 将所有白色字体颜色设置为黑色，因此当您创建虚假的黑色背景时，Firefox 仍会将文本设为黑色，从而使文本不可见。无论如何，这里是：
The HTML:
HTML：
<div class="redBox">
<div class="content">Black on red</div>
</div>
The css:
css：
.redBox {
/* o no, does not work with print */
background-color: red;
}
@media print {
.redBox {
position: relative;
overflow: hidden; /* this might not work well in all situations */
}
.redBox:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
/* and here it is, the background color */
border: 99999px red solid;
z-index: 0; /* was required in my situation */
}
.redBox * {
/* was required in my situation */
position: relative;
z-index: 1;
}
}
回答by Musa Haidari
There is a simple solution for this.
对此有一个简单的解决方案。
For background-color, instead of using:
对于background-color, 而不是使用：
background-color: red
Use:
用：
background-color: unset;
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high
number that is definitely
larger than the box dimension*/
Also for color, instead of:
也用于color, 而不是：
color: grey;
Use:
用：
color: unset;
text-shadow: 0 0 grey;
You may restrict them to print only by using @media print, but you do not have to!
您可以使用 限制它们仅打印@media print，但您不必这样做！
Note:注意：有时您应该使用
background-color: transparent;background-color: transparent;or color: transparent;color: transparent;if colorcolororbackground-colorbackground-color是从父元素继承的。回答by Ricky Boy
This is how I made it to work in my case by adding the below two lines to the particular div. "@@supports (-moz-appearance:meterbar)" is helpful to add styles specific to Firefox.
这就是我通过将以下两行添加到特定 div 使其在我的情况下工作的方式。"@@supports (-moz-appearance:meterbar)" 有助于添加特定于 Firefox 的样式。
-webkit-print-color-adjust: exact; color-adjust: exact;
-webkit-print-color-adjust：精确；颜色调整：精确；
@@supports (-moz-appearance:meterbar) {
.container {
margin: 0;
font-size: 0.85em;
width: 100%;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
回答by DhineshYes
For show background colors in firefox & IE
用于在 Firefox 和 IE 中显示背景颜色
@media print {
body{
-webkit-print-color-adjust: exact; /*chrome & webkit browsers*/
color-adjust: exact; /*firefox & IE */
}
}
回答by Saadat
For chrome you can use this:
对于 chrome，你可以使用这个：
-webkit-print-color-adjust:exact;
Or in print preview, tick the More settings->Background Graphics
或者在打印预览中，勾选更多设置->背景图形
For Firefox, you can't enable it using any CSS. You can enable it as follow (If you don't see the File, press Alt key once).
对于 Firefox，您不能使用任何 CSS 启用它。您可以按如下方式启用它（如果您没有看到文件，请按一次 Alt 键）。
File->Page setupand tick the Print Background(color & images)
文件->页面设置并勾选打印背景（颜色和图像）
回答by Kirill
I've hacked this by using SVG element
我已经通过使用 SVG 元素破解了这个
.legendItem {
position: relative;
}
.legentItemText {
position: relative;
z-index: 1;
}
.printBackground {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 0;
} <div class="legendItem">
<div class="legentItemText">Some text.....<div>
<svg class="printBackground">
<rect width="100%" height="100%" fill="#000" />
</svg>
</div>回答by Arve Systad
Maybe not the answer you're looking for, but here goes:
也许不是您正在寻找的答案，但这里有：
I'd rather add a separate stylesheet for printing the page. Typically, you would want to remove things like navigation menus, breadcrumbs, ads, and maybe do some small changes in margins, paddings, borders and fonts compared to the on-screen stylesheet.
我宁愿添加一个单独的样式表来打印页面。通常，与屏幕样式表相比，您可能希望删除导航菜单、面包屑、广告等内容，并可能对边距、填充、边框和字体进行一些小的更改。
Even thinking about forcing the user to fill a whole page with black ink with white text seems silly to me.
甚至考虑强迫用户用黑色墨水和白色文本填充整个页面对我来说似乎很愚蠢。
To add a separate print stylesheet, add another stylesheet to the head of your page.
要添加单独的打印样式表，请将另一个样式表添加到页面的头部。
<link rel="stylesheet" href="print.css" type="text/css" media="print">
