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

来源：懂视网责编：小采时间：2020-11-27 18:50:09

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

web打印时需要注意的CSS样式:今天写了一个在前端打印的功能，遇到了一个很坑的问题，设置的背景色打印的时候不起作用：不起作用的css样式：.p_class2_1{ color:white; float:left; background: #808080!important; width:80%; } .p_class3_1{ color:

推荐度：

点击下载本文 文档为doc格式

导读web打印时需要注意的CSS样式:今天写了一个在前端打印的功能，遇到了一个很坑的问题，设置的背景色打印的时候不起作用：不起作用的css样式：.p_class2_1{ color:white; float:left; background: #808080!important; width:80%; } .p_class3_1{ color:

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

推荐度：

点击下载本文 文档为doc格式

标签：打印机打印注意

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐