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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了web打印时需要注意的CSS样式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1551字，纯文字阅读大概需要3分钟。

内容图文

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

结果怎么都不起作用，
web打印时需要注意的CSS样式 - 文章图片

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

.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;} 
    }

结果如下：
web打印时需要注意的CSS样式 - 文章图片

发现之前没显示的背景色，现在显示了！
最主要的代码是@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样式的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的web打印时需要注意的CSS样式全部内容，希望文章能够帮你解决web打印时需要注意的CSS样式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413028.html

来源：【匿名】