HTML/CSS - Perché il colore di sfondo diventa bianco quando si stampa?

Il colore dello sfondo o persino i colori dei caratteri dei miei elementi diventano improvvisamente bianchi durante la stampa. Ecco un markup di esempio:HTML/CSS - Perché il colore di sfondo diventa bianco quando si stampa?

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

un ecco il CSS

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

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

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

fonte

2011-08-17 dpp

Tutti gli sfondi sono spogliati automaticamente dalla versione stampata. È questo il modo per prevenire sprechi di inchiostro.

È tuttavia possibile abilitarlo nel browser. (Come farlo dipende specificamente da ciascun browser).

fonte

2011-08-17 09:19:27

Non è possibile stampare i colori di sfondo senza impostare manualmente una preferenza nel browser. Tuttavia, questo potrebbe non essere un'opzione per alcune persone. La soluzione migliore che riesco a trovare è piuttosto poco elegante. Invece di usare "background-color" (che non stampa), dovresti creare un tag div con un bordo di colore grande su di esso. Il fatto è che i bordi colorati possono essere stampati correttamente. Quindi, dove viene visualizzato il colore evidenziato, posiziona un altro tag div con sopra il testo sopra. Inelegante, ma funziona.

È preferibile impostare sia il div di testo che il div di evidenziazione in un terzo div per facilitare il posizionamento. i div interni dovrebbero essere posizionati "assoluti" e il div esterno dovrebbe avere la posizione "relativa". Questo codice di esempio è testato sia in firefox che in 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>

fonte

2012-03-15 20:32:27

HTML/CSS - Perché il colore di sfondo diventa bianco quando si stampa?

risposta

Problemi correlati