web打印时需要注意的CSS样式

2020-11-27 来源：爱够旅游网

今天写了一个在前端打印的功能，遇到了一个很坑的问题，设置的背景色打印的时候不起作用：
不起作用的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样式