用 CSS 实现打印显示底色

上一篇有讲到如何在浏览器端实现打印功能。后面发现有个问题，就是表格表头有背景颜色，但是实际打印出来无背景颜色。网上的方法主要有以下几种实现方式：

1.把背景颜色写成行内样式，如下图所示：

 

但是发现这样子写了，并不行。可能还需要设置其他的，如果有知道的亲，望不吝赐教~

 

2.在打印的时候用户自己设置，如下图：

该方法虽然奏效，但是出于用户体验的角度考虑，不太现实。

 

3.直接用CSS 控制，此法有效，简单~直接上代码：

@media print {
    .receipt-print .table th {
        background-color: #f1f4f7 !important;
        -webkit-print-color-adjust: exact;
    }
}

@media print 是针对于打印媒体的。

-webkit-print-color-adjust属性不是个标准属性，具体的含义，使用方法可访问https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust。