Html 我可以强制将文本打印为白色吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10684392/
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
Can I force text to print as white?
提问by Matt Esch
Suppose I have some text which is displayed over an image or some other printable colours. Is it possible to force this text to white when printing? The default behaviour is to force white to black or grey in most browsers. This clearly makes sense when you are printing text in containers with background colours/images which are removed, but doesn't make sense to force the text in the case where you are overlaying text on images.
假设我有一些文本显示在图像或其他一些可打印的颜色上。打印时是否可以将此文本强制为白色？默认行为是在大多数浏览器中强制将白色变为黑色或灰色。当您在背景颜色/图像被删除的容器中打印文本时，这显然是有意义的，但在您将文本叠加在图像上的情况下，强制文本没有意义。
I should probably mention that I am quite aware of the print stylesheet, it just so happens that regardless of setting the font colour, in IE/chrome/firefox, the font does not appear white regardless. It ends up black or grey depending on the browser. Please show an example of white text over an image if you think it's actually possible.
我可能应该提一下，我非常了解打印样式表，碰巧无论设置字体颜色如何，在 IE/chrome/firefox 中，无论如何字体都不会显示为白色。根据浏览器的不同，它最终会变成黑色或灰色。如果您认为这实际上是可能的，请在图像上显示一个白色文本示例。
To illustrate see:
为了说明，请参见：
I personally don't think it's possible due to the way printing works. It's pretty annoying none-the-less.
由于打印的工作方式，我个人认为这是不可能的。尽管如此，这很烦人。
回答by ScottS
This is not entirely in control of the web page author.
这并不完全由网页作者控制。
For example, this fiddlewill print (at least it did for me on a Dell 1720 Laser Printer) white text on any of the three black backgrounds in
例如，这个小提琴将在三个黑色背景中的任何一个上打印（至少在戴尔 1720 激光打印机上对我来说是这样）白色文本
IE9
IE9
ifthe userhas checked the box found next to:
如果该用户已检查框旁边发现：
Tools -> Print -> Page Setup -> "Print Background Colors and Images"
工具 -> 打印 -> 页面设置 -> “打印背景颜色和图像”
If that box is unchecked, then it will not print the black at all on the first two, but will on the last (since it is an imgtag), but it prints the text as a grey, even over the imgtag. Thus, it seems that the setting for "Print Background Colors and Images" affects how the browser interprets the text, and will allow a true white (knock-out effect) if checked, but not if unchecked.
如果未选中该框，则它根本不会在前两个上打印黑色，但会在最后一个上img打印（因为它是标签），但会将文本打印为灰色，即使在img标签上也是如此。因此，似乎“打印背景颜色和图像”的设置会影响浏览器解释文本的方式，并且如果选中则将允许真正的白色（剔除效果），但如果未选中则不会。
Firefox
火狐
Checkbox found here (which seems to work):
在这里找到的复选框（似乎有效）：
File -> Page Setup -> "Print Background (colors & images)"
文件 -> 页面设置 -> “打印背景（颜色和图像）”
For Chrome? Web Page Author Controlled?
对于铬？网页作者控制？
I have not yet verified whether the information from this postwill do it or not (it does not work for me on my next fiddle, but it may be because it is in an iframe). For elements that should print in Chrome, try setting:
我还没有验证这篇文章中的信息是否会这样做（它对我的下一个小提琴不起作用，但可能是因为它在 iframe 中）。对于应该在 Chrome 中打印的元素，请尝试设置：
-webkit-print-color-adjust: exact;
回答by Jehy
Marked answer is wrong. You can control text color in every browser!You just need to output text in svg. Browsers don't change color in svg. Here's an example:
标记的答案是错误的。您可以在每个浏览器中控制文本颜色！您只需要在 svg 中输出文本。浏览器不会在 svg 中改变颜色。下面是一个例子：
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
回答by Vladimir Starkov
print.csswill help you, Eric meyer have a postabout it.
print.css会帮助你，埃里克迈耶有一篇关于它的帖子。
For example html5boilerplateusing this style on his css:
例如html5boilerplate在他的 css上使用这种样式：
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
Update:
更新：
With your example html:
使用您的示例 html：
<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>
and my css:
和我的CSS：
#sometext {
position: absolute;
top: 125px;
left: 220px;
color: #FFF;
}
@media only print {
#sometext {
color: #FFF !important;
/* actually trick with white text-shadow not work ( */
text-shadow: 0 0 3px #FFF !important;
}
}
? I get this demo. Is this an acceptable solution?
? 我得到了这个演示。这是一个可以接受的解决方案吗？
?
?
回答by Nazar Vynnytskyi
Solution:
解决方案：
@media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #fff;
}
@media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #fff;
-webkit-print-color-adjust: exact;
}
}
}
回答by Andrew Leach
The example http://jsfiddle.net/NSwYE/prints white text on top of the cat for me. But I'm using Firefox 3.6 and a Brother laser printer.
示例http://jsfiddle.net/NSwYE/为我在猫的顶部打印白色文本。但我使用的是 Firefox 3.6 和 Brother 激光打印机。
The behaviour of printers is entirely dependent on the printer driver and the application.My printer will print the example correctly using Firefox. It will print grey-scale text from Microsoft Publisher correctly. It will not print grey-scale text in Microsoft Word: text is always black.
打印机的行为完全取决于打印机驱动程序和应用程序。我的打印机将使用 Firefox 正确打印示例。它将从 Microsoft Publisher 正确打印灰度文本。它不会在 Microsoft Word 中打印灰度文本：文本始终为黑色。
回答by Ian Devlin
Probably, if you use a print specific stylesheet that styles it as such.
可能，如果您使用打印特定样式表来设置样式。
e.g.
例如
<link href="print.css" rel="stylesheet" media="print" />
回答by Jimmy Breck-McKye
It might be a bit overkill, but if this is something you need repeatedly, you might consider generating the content using either canvas or SVG (Raphael.js will provide IE support). Both canvas and SVG/VML elements will print with exact colours in major browsers.
这可能有点矫枉过正，但如果这是您反复需要的东西，您可以考虑使用画布或 SVG 生成内容（Raphael.js 将提供 IE 支持）。画布和 SVG/VML 元素都将在主要浏览器中以准确的颜色打印。
回答by 18C
/* Text color */
.element
{
color:transparent;
text-shadow:0 0 0 #fff;
}
/* Background color */
.element
{
box-shadow:0 0 0 1000px #000 inset;
}
In Internet Explorer, you need to enable background printing. Tested in Chrome 70, Firefox 60 (with disabled background printing also works) and IE11.
在 Internet Explorer 中，您需要启用后台打印。在 Chrome 70、Firefox 60（禁用后台打印也可以）和 IE11 中测试。
It doesn't need to calculate SVG width because SVG is not used.
它不需要计算 SVG 宽度，因为没有使用 SVG。
