今天写了一个在前端打印的功能，遇到了一个很坑的问题，设置的背景色打印的时候不起作用：
不起作用的css样式：
.p_class2_1{
color:white;
float:left;
background: #808080!important;
width:80%;
}
.p_class3_1{
color:white;
float:left;
background: #808080!important;
width:100%;
}
.p_class5_1{
color:white;
background: #808080!important;
width:100%;
}
结果怎么都不起作用，
后来通过各种办法解决：
下面是解决的代码：
.p_class2_1{
color:white;
float:left;
background: #808080!important;
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#808080',endcolorstr='#808080');
width:80%;
}
.p_class3_1{
color:white;
float:left;
background: #808080!important;
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#808080',endcolorstr='#808080');
width:100%;}
.p_class5_1{
color:white;
background: #808080!important;
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#808080',endcolorstr='#808080');
width:100%;}
@media print {
.p_class2_1 {-webkit-print-color-adjust: exact;}
.p_class3_1 {-webkit-print-color-adjust: exact;}
.p_class5_1 {-webkit-print-color-adjust: exact;}
}
结果如下：
发现之前没显示的背景色，现在显示了！
最主要的代码是@media print {
.p_class2_1 {-webkit-print-color-adjust: exact;}
.p_class3_1 {-webkit-print-color-adjust: exact;}
.p_class5_1 {-webkit-print-color-adjust: exact;}
} @media print是为了让打印的时候显示背景色，默认是不显示的！
以上就是web打印时需要注意的css样式的详细内容。