有没有办法确保我的灰色字体不变黑?
Firefox和Chrome似乎这样做是为了防止黑色背景上的白色文字变成白色。我没有背景颜色(除了白色),因此这种浏览器级别的转换并没有用,它只有无缘无故地帮助防止灰色变色。
有方法关闭这个功能吗?还是我应该坚持使用透明度、浏览器检测和给我的灰色着色……
有没有办法确保我的灰色字体不变黑?
Firefox和Chrome似乎这样做是为了防止黑色背景上的白色文字变成白色。我没有背景颜色(除了白色),因此这种浏览器级别的转换并没有用,它只有无缘无故地帮助防止灰色变色。
有方法关闭这个功能吗?还是我应该坚持使用透明度、浏览器检测和给我的灰色着色……
解决方案:
@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;
}
}
}
我发现必须要:
在 CSS 规则中添加 !important
……并且……
在 Firefox 打印对话框中勾选“外观:打印背景颜色”选项。
在 Chrome 中我无法让它工作。
<style>
@media print {
div.red {
color: #cccccc !important;
}
</style>
将 div 标签的 HTML 更改如下:
#777
替换为#778
。注意透明度。有时,即使打印预览显示的结果很好,但只在选择的打印机上有效。对于使用不幸固件的打印机,如果使用透明度使文本变灰,它们将完全无法打印。您只需要在 SVG 中输出灰色字体即可。浏览器不会在 SVG 中改变颜色。这里是一个例子:
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
换句话说,即使在通用 CSS 文件中设置了文本颜色(带有media='all'
属性),在打印时它也会被忽略,至少在Firefox和Chrome中是这样。
我发现在打印 CSS 文件(带有media='print'
属性)中再次编写(冗余但..... 必要的)文本颜色,颜色现在将被考虑。
这个解决方案适用于所有浏览器:
.text{
color: transparent;
text-shadow: 2px 0 #red;
}
重视颜色:
.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>
对我来说,以上所有方法都没有起作用,所以我最终找到了解决方法。
始终为直接元素指定颜色。例如,假设您的HTML代码如下:
<div class='div'><br/>
< h1>Text< /h1><br/>
</div>
以及你的CSS
.div {
color: #ccc;
}
.div h1 {
color: #ccc;
}
@media print {
.div h1 {
-webkit-print-color-adjust: exact;
}
}