Question

有没有办法确保我的灰色字体颜色不会变黑？

Firefox和Chrome似乎是为了防止黑色背景上的白色文字变成白色白色。我没有背景颜色（白色除外），因此这种浏览器级别的转换没有用，它只会有助于无缘无故地防止灰色。

有没有办法将其关闭？或者我应该坚持使用不透明度，浏览器检测和着色灰色等技术......

Answer 1

<强>解决方案：

  @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;
        }
      }
   }

Answer 2

我发现不得不：

将!important添加到css规则... 和...
在Firefox打印对话框中，勾选“外观：打印背景颜色”选项

我无法在Chrome中使用它。

Answer 3

如果添加颜色，某些浏览器会对灰色添加更多尊重：将#777替换为#778。警惕不透明度。有时，即使打印预览显示效果很好，它实际上只适用于选定的打印机。如果使用不透明的灰色，打印机将无法打印您的文本。

Answer 4

您只需要在svg中输出您的灰色字体。浏览器不会改变svg中的颜色。这是一个例子：

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>

Answer 5

我发现 TEXT颜色不会被“通用”样式表继承，但必须在print css文件中再次强制使用。

换句话说，即使在常规css文件（具有media='all'属性的文件）中设置文本颜色，打印时也会忽略它，至少在Firefox和Chrome中是这样。

我发现在print css文件（带有media='print'属性的文件）中再次写入（冗余但是必要的）文本颜色，现在将考虑颜色。

Answer 6

上面没有任何内容对我有用，所以我终于明白了。

始终为直接元素赋予颜色。防爆。假设你的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; 
   } 
}

希望这可以帮助你!!

如果您找到更好的解决方案，请回复，因为这是我在2小时后可以找到的并且对我有效。

Answer 7

该解决方案可在所有浏览器中使用：

.text{ color: transparent; text-shadow: 2px 0 #red; }

Answer 8

重视颜色：

.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>

Answer 9

我认为那是该页面上唯一的div。进行以下更改，它应该可以正常工作。

<style>
@media print {
div.red {
      color: #cccccc !important;
  }
</style>

并如下所示更改div标签的html

灰色字体彩色印刷

9 个答案: