Html 灰色字体彩色印刷
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7615681/
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
Grey Font Color Printing
提问by Bryan Field
Is there any way to ensure that my grey font colors do not turn black?
有什么办法可以确保我的灰色字体颜色不会变黑？
Firefox and Chrome seem to do this in order to prevent white text on black background from turning into white on white. I do not have a background color (except white), so this browser-level conversion is not useful, it only helps in preventing grey colors for no reason.
Firefox 和 Chrome 似乎这样做是为了防止黑底白字变成白底白字。我没有背景颜色（除了白色），所以这个浏览器级别的转换没有用，它只会无缘无故地防止灰色。
Is there a way to turn this off? Or should I just stick with techniques like opacity, browser detection, and coloring my grays...
有没有办法关闭它？或者我应该坚持使用不透明度、浏览器检测和灰色着色等技术......
回答by Nazar Vynnytskyi
Solution:
解决方案：
@media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #ccc;
}
@media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #ccc;
-webkit-print-color-adjust: exact;
}
}
}
回答by matt burns
I found had to :
我发现必须：
Add
!importantto the css rule... and...In the Firefox print dialog, tick the option for "Appearance: Print background colors"
添加
!important到css规则...和...在 Firefox 打印对话框中，勾选“外观：打印背景颜色”选项
I couldn't get it to work in Chrome.
我无法让它在 Chrome 中工作。
回答by Bryan Field
Some browsers add more respect to your gray if you add color: Replace #777with #778. Be wary of opacity. Sometimes, even if the print preview will show great results, it only actually works on select printers. Printers with unlucky firmware will fail to print your text at all if it is gray using opacity.
如果您添加颜色，某些浏览器会更加尊重您的灰色：替换#777为#778. 警惕不透明。有时，即使打印预览会显示出很好的效果，它实际上也只适用于选定的打印机。如果使用不透明度显示为灰色，则固件不走运的打印机将根本无法打印您的文本。
回答by Jehy
You just need to output your grey font 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 Victor Batista
This solution working in all browsers:
此解决方案适用于所有浏览器：
.text{
color: transparent;
text-shadow: 2px 0 #red;
}
.text{
color: transparent;
text-shadow: 2px 0 #red;
}
回答by Luca Detomi
I found that TEXT color is not inherited by "general purpose" stylesheet, but must be forced again in print css file.
我发现TEXT 颜色不是由“通用”样式表继承的，而是必须在打印 css 文件中再次强制。
In other words, even if text color is set in the general css file (one with media='all'attribute), it is ignored when printed, at least in Firefox and Chrome.
换句话说，即使在通用 css 文件（有media='all'属性的）中设置了文本颜色，打印时也会忽略它，至少在 Firefox 和 Chrome 中是这样。
I found that writing again (redundant but..... necessary) text color in print css file (one with media='print'attribute), color now will be considered.
我发现在打印 css 文件（带有media='print'属性的文件）中再次写入（冗余但..... 必要的）文本颜色，现在将考虑颜色。
回答by mano
Give importance to color:
重视颜色：
.bgcol{
background-color:skyblue !important;
}
.subject_content,h2,p{
color:rgba(255, 255, 255) !important;
margin: 25px auto;
}
<body class="bgcol">
<div class="subject_content">
<h2 class='text-center'>fhddfhnt area</h2>
<p>sdgdfghdfhdfh.</p>
</div>
回答by suraj kumar
I thought that is the only div on that page. Make the following change, it should work fine.
我认为这是该页面上唯一的 div。进行以下更改，它应该可以正常工作。
<style>
@media print {
div.red {
color: #cccccc !important;
}
</style>
And change the html of the div tag like below
并像下面一样更改 div 标签的 html
回答by entersid
Nothing above was working for me so I finally figured it out.
以上没有对我有用，所以我终于想通了。
Always give colors to direct elements. Ex. Suppose your html is
始终为直接元素赋予颜色。前任。假设你的 html 是
<div class='div'><br/>
< h1>Text< /h1><br/>
</div>
and your CSS
和你的 CSS
.div {
color: #ccc;
}
This was my case. In this case no matter what you do the color won't show.
这是我的情况。在这种情况下，无论您做什么，颜色都不会显示。
You have to do
你必须要做
.div h1 {
color: #ccc;
}
@media print {
.div h1 {
-webkit-print-color-adjust: exact;
}
}
Hope this helps you!!
希望这对你有帮助！！
Please reply if you find a better solution as this is what I could find after 2 hrs and it works for me.
如果您找到更好的解决方案，请回复，因为这是我在 2 小时后可以找到的并且对我有用。
