Using CSS to print the display background

The previous article has described how to implement the printing function on the browser side. Later, there is a problem, that is, the table header has a background color, but the actual print out no background color. The methods of online mainly have the following ways of realization:

1. Write the background color into the inline style, as shown in:

But found that this is written, and not. may also need to set up other, if have to know the pro, hope to enlighten ~

2. When printing, the user set themselves, such as:

Although this approach works, it is not realistic to consider the user experience.

3. Directly with CSS control, this method is effective, simple ~ directly on the code:

@media Print {
    . receipt-print. Table th {
        Background-color: #f1f4f7!important;
        -webkit-print-color-adjust:exact;
    }
}

@media Print is for printing media.

The-webkit-print-color-adjust property is not a standard attribute, meaning that the use method can be accessed https://developer.mozilla.org/en-us/docs/web/css/- Webkit-print-color-adjust.

Using CSS to print the display background