All geek questions in one place

HTML / CSS - Why does background color turn white when printing?

My background color or even the font color of my elements suddenly turns white when printing. Here's a sample markup:

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

 @media all { body { background-color:green; } #P1 { background-color:#f00; } } @media print { #ActionPanel { visibility:hidden; } }
+6
source share
2 answers

All backgrounds are automatically deleted from the print version. In this way, ink waste can be prevented.

However, you can enable it in your browser. (How to do this depends on each browser).

+10
source

There is no way to print the background color without manually setting preferences in your browser. However, this may not be an option for some people. The best workaround I can find is rather inelegant. Instead of using "background-color" (which does not print), you should create a div tag with a large color frame on it. The fact is that colored borders can print correctly. Then, when the highlighted color is displayed, put another div tag with the text on top. Inelegant, but it works.

It is best to set both the text div and the highlight div to the third div for easy placement. inner divs must be "absolute" and the outer div must be in the "relative" position. This sample code is tested in both firefox and 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>
+4
source

Source: https://habr.com/ru/post/895231/

More articles:


All Articles