HTML/CSS - 打印時爲什麼背景顏色會變成白色？

我的背景顏色甚至我元素的字體顏色在打印時突然變成白色。下面是一個示例標記：HTML/CSS - 打印時爲什麼背景顏色會變成白色？

<div id="ActionPanel"> 
    <input type="button" onclick="javascript:window.print();" value="Print"> 
</div> 

<p id="P1"> 
    Hello World! 
</p> 

<p id="P2"> 
    Hello Web! 
</p> 

<p id="P3"> 
    Hello StackOverflow 
</p>

的，這裏的CSS

@media all 
{ 
    body 
    { 
     background-color:green; 
    } 

    #P1 
    { 
     background-color:#f00;  
    } 
} 

@media print 
{ 
    #ActionPanel 
    { 
     visibility:hidden; 
    } 
}

來源

2011-08-17 dpp

所有背景都自動剝離從印刷版了。這是爲了防止浪費墨水。

但是，您可以在瀏覽器中啓用它。（如何做到這一點取決於具體的每個瀏覽器）。

來源

2011-08-17 09:19:27

如果沒有在瀏覽器中手動設置首選項，則無法打印背景顏色。但是，這可能不適用於某些人。我能找到的最好的解決方法是相當不雅的。不要使用「背景色」（不打印），你應該創建一個帶有大顏色邊框的div標籤。問題是，彩色邊框可以正確打印。然後，在突出顯示的顏色顯示的位置，放置另一個div標籤，並在其上方顯示文本。不雅，但它的作品。

爲了便於放置，最好將文本div和高亮div設置在第三個div內。內部div應該是「絕對」的位置，外部div應該有「相對」的位置。此示例代碼在firefox和chrome中都進行了測試：

<style type="text/css"> 
    #outer_box { 
     position: relative; 
     border: 2px solid black; 
     width: 500px; 
     height:300px; 
    } 

    #yellow_highlight { 
     position: absolute; 
     width: 0px; 
     height: 30px; 
     border-left: 300px; 
     border-color: yellow; 
     border-style: solid; 
     top: 0; 
     left: 0px 
    } 

    #message_text { 
     position: absolute; 
     top: 0; 
     left: 0px; 
    } 
</style> 

<body> 
    <div id="outer_box"> 
    <div id="yellow_highlight">&nbsp;</div> 
    <div id="message_text">hello, world!</div> 
    </div> 
</body>

來源

2012-03-15 20:32:27

HTML/CSS - 打印時爲什麼背景顏色會變成白色？

回答

相關問題