关闭

web前端打印需要注意的CSS样式

标签: cssweb前端
120人阅读 评论(0) 收藏 举报
分类:

今天写了一个在前端打印的功能,遇到了一个很坑的问题,设置的背景色打印的时候不起作用:
不起作用的css样式:

.div_class2_1{
       color:white;
       float:left;
       background: #808080!important;  

       width:80%;
  }    

.div_class3_1{
     color:white;
     float:left;
     background: #808080!important;  

     width:100%;

}       



.div_class5_1{
     color:white;
     background: #808080!important;  

     width:100%;
}   

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

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

.div_class2_1{
       color:white;
       float:left;
       background: #808080!important;  
       filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');  
       width:80%;



}

.div_class3_1{
     color:white;
     float:left;
     background: #808080!important;  
     filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');  
     width:100%;

}


.div_class5_1{
     color:white;
     background: #808080!important;  
     filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080');  
     width:100%;
}   

 @media print {  
        .div_class2_1 {-webkit-print-color-adjust: exact;}  
        .div_class3_1 {-webkit-print-color-adjust: exact;} 
        .div_class5_1 {-webkit-print-color-adjust: exact;} 
    }  

结果如下:
这里写图片描述

发现之前没显示的背景色,现在显示了!
最主要的代码是@media print {
.div_class2_1 {-webkit-print-color-adjust: exact;}
.div_class3_1 {-webkit-print-color-adjust: exact;}
.div_class5_1 {-webkit-print-color-adjust: exact;}
}
@media print是为了让打印的时候显示背景色,默认是不显示的!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2034次
    • 积分:208
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类