图形图标的颜色在打印预览中未更改

我将图标图标的颜色更改为蓝色。要更改颜色，我使用了下面的代码。图形图标的颜色在打印预览中未更改

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <style> 
      .colorful { 
       color: blue !important; 
      } 
      @media print { 
       .colorful { 
       color: blue !important; 
      } 
     } 
    </style> 
</head> 
<body> 
    <span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span> 
</body> 
</html>

在屏幕则显示为蓝色

但在打印预览

我使用Chrome浏览器的图标显示为黑色。我需要在打印预览中使图标以蓝色显示

来源

2016-07-29 Vaishali

http://stackoverflow.com/questions/7615681/grey-font-color-printing –

它可以帮助你 –

谢谢您的帮助。但是文字颜色正在变化，只有痣图标颜色不会在印刷中发生变化。 – Vaishali

检查完图标后，显然您需要将:before作为图标的选择器，以便您可以正确应用打印颜色。见下面的截图：

这就是说，你需要相应地修改你的CSS。运行下面的代码片段，然后按Ctrl+P。您会注意到您的图标现在在打印预览中是蓝色的。

  .colorful { 
 
       color: blue !important; 
 
      font-size:41px; 
 
      } 
 
      @media print { 
 
       .colorful:before { 
 
       color: blue !important; 
 
      } 
 
     }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span>

来源

2016-07-29 06:33:48 Noel

图形图标的颜色在打印预览中未更改

回答

相关问题