我有一些简单的CSS:
#someElement {
background-color:black;
color:white;
}
在浏览器中看起来没问题,但是当我在Firefox中打印时,它会以黑色文字和白色背景的形式出现。 我想这可能是一种节省墨水的特性,但是有没有什么办法可以解决这个问题?
这是一个浏览器设置。在CSS中您无法做任何事情。在Windows上 - 文件 > 页面设置... > 打印背景
。
onload="window.print();
时设置这个呢?因为浏览器设置只在使用浏览器的“打印”按钮时起作用。 - Naxos84我找到了一个解决方案,它有点巧妙,但是通过使用CSS伪元素,您可以使用粗边框创建背景。即使“打印背景”已关闭,边框也会被打印出来,只需将它们设置得非常厚!请注意,Firefox会将所有白色字体颜色设置为黑色,因此当您创建一个假的黑色背景时,Firefox仍然会使文本变黑,从而呈现看不见的文本。无论如何,这就是方法:
HTML 代码:
<div class="redBox">
<div class="content">Black on red</div>
</div>
样式表:
.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;
}
}
z-index: -1
设置为0
,则可以省略.redBox *
部分。 - kernel.redbox
的背景设置为透明,以便打印。 - Blazemonger9999cm
而不是px
。(我进行了实验,这是唯一有效的单位。10000cm
不起作用。) - Ismael Miguel5585.70776367in
(~`14299.4118749952cm`)。您可以在http://jsfiddle.net/67k4Lvn9/2/上尝试。至少在Google Chrome 42.0.2311.135和Firefox 37.0.2上有效。 - Ismael Miguel有一个简单的解决方案。
对于background-color
,不要使用:
background-color: red
使用:
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*/
对于color
,建议使用以下语法:
color: grey;
使用:
color: unset;
text-shadow: 0 0 grey;
您可以通过使用@media print
将它们限制为仅打印,但您并不一定需要这样做!
color
或background-color
是继承自父元素的,则有时应该使用background-color: transparent;
或color: transparent;
。box-shadow
后面添加 :
。 - userlond在Firefox和IE中显示背景颜色
@media print {
body{
-webkit-print-color-adjust: exact; /*chrome & webkit browsers*/
color-adjust: exact; /*firefox & IE */
}
}
以下是我如何在我的情况下通过向特定的div添加以下两行代码来使其工作。 "@@supports (-moz-appearance:meterbar)"有助于添加针对Firefox的特定样式。
-webkit-print-color-adjust: exact; color-adjust: exact;
@@supports (-moz-appearance:meterbar) {
.container {
margin: 0;
font-size: 0.85em;
width: 100%;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
-webkit-print-color-adjust:exact;
在打印预览中,勾选更多设置->背景图形
对于Firefox浏览器,无法使用任何CSS启用它。您可以按照以下步骤启用它(如果您没有看到文件,请按一次Alt键)。
文件->页面设置,勾选打印背景(颜色和图像)
.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>
<link rel="stylesheet" href="print.css" type="text/css" media="print">
color-adjust
属性。'color-adjust: exact';下面有一个答案提到了应该选择哪个作为正确答案。 - RustyToms