圖形圖標的顏色在打印預覽中未更改

我將圖標圖標的顏色更改爲藍色。要更改顏色，我使用了下面的代碼。圖形圖標的顏色在打印預覽中未更改

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

圖形圖標的顏色在打印預覽中未更改

回答

相關問題