web前端打印需要注意的CSS样式

来源：互联网发布：51单片机项目外包网编辑：程序博客网时间：2024/06/05 16:14

今天写了一个在前端打印的功能，遇到了一个很坑的问题，设置的背景色打印的时候不起作用：
不起作用的css样式：

.div_class2_1{       color:white;       float:left;       background: #808080!important;         width:80%;  }    .div_class3_1{     color:white;     float:left;     background: #808080!important;       width:100%;}       .div_class5_1{     color:white;     background: #808080!important;       width:100%;}

结果怎么都不起作用，
这里写图片描述

后来通过各种办法解决：
下面是解决的代码：

.div_class2_1{       color:white;       float:left;       background: #808080!important;         filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');         width:80%;}.div_class3_1{     color:white;     float:left;     background: #808080!important;       filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');       width:100%;}.div_class5_1{     color:white;     background: #808080!important;       filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');       width:100%;}    @media print {          .div_class2_1 {-webkit-print-color-adjust: exact;}          .div_class3_1 {-webkit-print-color-adjust: exact;}         .div_class5_1 {-webkit-print-color-adjust: exact;}     }

结果如下：
这里写图片描述

发现之前没显示的背景色，现在显示了！
最主要的代码是@media print { .div_class2_1 {-webkit-print-color-adjust: exact;} .div_class3_1 {-webkit-print-color-adjust: exact;} .div_class5_1 {-webkit-print-color-adjust: exact;} } @media print是为了让打印的时候显示背景色，默认是不显示的！

阅读全文

0 0