web打印时需要注意的CSS样式-css教程-PHP中文网

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

一个新手

发布： 2017-09-14 11:11:09

原创

2252人浏览过

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

登录后复制

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

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

EasyUI中文学习教程 DOC版

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。本平台提供EasyUI中文学习教程下载，需要的朋友们可以下载！

查看详情

.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 { <br> .p_class2_1 {-webkit-print-color-adjust: exact;} <br> .p_class3_1 {-webkit-print-color-adjust: exact;} <br> .p_class5_1 {-webkit-print-color-adjust: exact;} <br> } @media print是为了让打印的时候显示背景色，默认是不显示的！

以上就是web打印时需要注意的CSS样式的详细内容，更多请关注php中文网其它相关文章！