关闭

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

标签: cssweb前端
196人阅读 评论(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
查看评论

CSS样式注意

多重样式 如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。 例如,外部样式表拥有针对 h3 选择器的三个属性: h3 { color: red; text-align: left; font-size: 8pt; } 而内部样...
  • bluerstar
  • bluerstar
  • 2012-03-22 14:16
  • 193

Web前端面试指导(五十):CSS样式书写有哪些规范?

一、CSS书写顺序 1.位置属性(position, top, right,z-index, display, float等) 2.大小(width, height, padding,margin) 3.文字系列(font, line-height,letter-spacing, color- ...
  • lxcao
  • lxcao
  • 2016-11-01 22:52
  • 1127

WEB前端开发技巧与注意事项

心知梦圆 博客园首页新随笔联系管理订阅 随笔- 20  文章- 0  评论- 0  web移动端开发技巧与注意事项汇总 一、meta的使用 1、   强制让文档的宽度与设备的...
  • chenqingyu000
  • chenqingyu000
  • 2016-09-13 16:45
  • 579

Web前端H5之CSS样式总结

1、CSS介绍 概念:层叠样式表或者级联样式表(Cascading Stylr Sheets) 层叠;CSS特性 CSS作业:设置网页结构的样式(改变html标签的样式),通过CSS给HTML标签设置属性到改变样式 CSS书写位置介绍: * 内嵌式写法...
  • Gerry199102
  • Gerry199102
  • 2017-11-15 22:06
  • 216

WEB测试应该注意哪些地方,怎样才能做好WEB测试

基于Web的系统测试与传统的软件测试既有相同之处,也有不同的地方,对软件测试提出了新的挑战。基于Web的系统测试不但需要检查和验证是否按照设计的要求运行,而且还要评价系统在不同用户的浏览器端的显示是否合适。重要的是,还要从最终用户的角度进行安全性和可用性测试。本文从功能、性能、可用性、客户端兼容性、...
  • sflsgfs
  • sflsgfs
  • 2013-09-10 21:07
  • 8307

Web前端需要掌握的知识

1. 前言   大约在几个月之前,让我看完了《webkit技术内幕》这本书的时候,突然有了一个想法。想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html、css、js)的认识——做web前端需要的比这三大块要多得...
  • lqijlyy
  • lqijlyy
  • 2017-06-14 17:01
  • 367

WEB前端-CSS-选择器&常用样式/属性

CSS 层叠样式表 CSS(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言)或者XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 关于更详细的CSS介绍可参考此连接。本篇只记录最常用的几点内容。存在形势css一共有三中常见的存在形势: ...
  • qq_34409701
  • qq_34409701
  • 2016-08-16 21:48
  • 1256

一名合格的web前端工程师需要哪些技能?

我们都知道,所有呈现的内容都是基于HTML 网页的。 如果你的html、css(包括现在的HTML5+CSS3)基础不会,或者不够扎实,都很难在有大的进步,或者你的JS 很好,但布局基础不行,还是不能算合格的web前端。 其次,前端主要负责实现视觉和交互功能,以及与后端服务器通信,完成业...
  • w3cschoolcn
  • w3cschoolcn
  • 2016-08-19 18:15
  • 2919

关于重载的概念和使用时的注意事项

本文对重载的概念和一些基本的常见用法作了一些归纳,供读者参阅。
  • qq_38234015
  • qq_38234015
  • 2017-04-24 11:43
  • 431

WEB前端之学会用PS很重要

你说有美图秀秀之后PS要over了,NO PS 依旧很重要,当然除了修人像,比如切图什么的
  • yanwydxf
  • yanwydxf
  • 2017-07-04 15:46
  • 550
    个人资料
    • 访问:3940次
    • 积分:331
    • 等级:
    • 排名:千里之外
    • 原创:27篇
    • 转载:8篇
    • 译文:0篇
    • 评论:0条
    文章分类