首页 > web前端 > css教程 > web打印时需要注意的CSS样式

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

一个新手
发布: 2017-09-14 11:11:09
原创
1993 人浏览过

今天写了一个在前端打印的功能,遇到了一个很坑的问题,设置的背景色打印的时候不起作用:
不起作用的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 { <code>@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>    }        .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样式的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板