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の両方を3番目の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 - 印刷時に背景色が白くなるのはなぜですか？

答えて

関連する問題