How to print HTML background colors with CSS

Asked

Viewed 5,125 times

2

<body>
<div id="div0">
    I love ...
</div>
<div id="div1">
Teste
</div>

<table id="table" border="1" align="center">
    <tr>
        <td>
            Coluna 1
        </td>
        <td>
            Coluna 2
        </td>
        <td>
            Coluna 3
        </td>
        <td>
            Coluna 4
        </td>
        <td>
            Coluna 5
        </td>

    </tr>
            <td>
            Coluna 1
        </td>
        <td>
            Coluna 2
        </td>
        <td>
            Coluna 3
        </td>
        <td>
            Coluna 4
        </td>
        <td>
            Coluna 5
        </td>

    </tr>


 #div0 {
    background-color:#FF0000; 
}
#div1{
    background-color: #FFD6D6;
}
#table:
{
    background-color: #170E0E;
}

I want you to come out exactly like these div.

When I have printed out only the text, and the table without the colors

html css

1 answer

4


In Chrome and Safari (and possibly other Webkit-based browsers), there is the non-standard property -webkit-print-color-adjust, which may be defined as exact to force the printing of background colors:

body {
    -webkit-print-color-adjust: exact;
}

This forces the impression to all the body’s descendants (but the body itself is an exception, and its background color is not printed).

In other browsers it is possible to force the printing of the backgrounds by changing a setting, usually available in the print dialog itself.

  • It worked!... thank you

  • Just don’t forget it only works on some browsers!

  • in firefox and so how it looks? can do something?

  • I think there is no way. Just changing the browser configs when printing.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.