上一篇有讲到如何在浏览器端实现打印功能。后面发现有个问题,就是表格表头有背景颜色,但是实际打印出来无背景颜色。网上的方法主要有以下几种实现方式:

1.把背景颜色写成行内样式,如下图所示:

但是发现这样子写了,并不行。可能还需要设置其他的,如果有知道的亲,望不吝赐教~

2.在打印的时候用户自己设置,如下图:

该方法虽然奏效,但是出于用户体验的角度考虑,不太现实。

3.直接用CSS 控制,此法有效,简单~直接上代码:

@media print {
.receipt-print .table th {
background-color: #f1f4f7 !important;
-webkit-print-color-adjust: exact;
}
}

@media print 是针对于打印媒体的。

-webkit-print-color-adjust属性不是个标准属性,具体的含义,使用方法可访问https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust

用 CSS 实现打印显示底色的更多相关文章

  1. css控制打印时只显示指定区域

      CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...

  2. 用CSS创建打印页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  3. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  4. CSS实时编辑显示

    方法 CSS实时编辑显示:通过display:block让css文本显示出来,再加上contentEditable使文本可编辑 <!DOCTYPE html> <html> & ...

  5. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  6. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  7. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  8. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  9. C语言 二维数组复制、清零及打印显示

    #include <stdlib.h> #include <stdio.h> #include <string.h> //二维整型数组打印显示 ],int row, ...

随机推荐

  1. IIS7的应用程序池详细解析

    在 IIS 7 中,应用程序池有两种运行模式:集成模式和经典模式.应用程序池模式会影响服务器处理托管代码请求的方式 在IIS 7中,添加一个应用程序或者单独的网站,默认会自动新建一个对应的“应用程序池 ...

  2. Service和广播联合更新UI的例子

    sa111111 于 2010-11-19 10:56 发表在 [Android实例] [复制链接] [只看楼主] [上一主题] [下一主题]   在Android中,异步更新UI,通常我们会选用Ha ...

  3. Linux内核(16) - 高效学习Linux内核

    世界悲结束了,章鱼哥也退役了,连非诚勿扰中的拜金女也突然的少了很多.这本<Linux内核修炼之道>在卓越.当当.china-pub上也已经开卖了,虽然是严肃文学,但为了保证流畅性,大部分文 ...

  4. 办公技巧:局域网内设置固定ip

    第一步:查看自己现在的网络配置 打开命令行,输入:ipconfig /all 第二步:打开控制面板 - 网络配置 根据CMD命令的ipconfig信息对号入座填入即可. 然后,重启一下WIFI即可. ...

  5. Mac - 使用php环境

    按下shift + Command + G  ,输入以下php(www)路径 /Library/WebServer/Documents 打开终端,输入以下命令打开环境 sudo apachectl s ...

  6. python map 详解

    python中的map函数应用于每一个可迭代的项,返回的是一个结果list.如果有其他的可迭代参数传进来,map函数则会把每一个参数都以相应的处理函数进行迭代处理.map()函数接收两个参数,一个是函 ...

  7. 使用xtrabackup(innobackupex)实现MySQL的热备

    mysql 的热备http://www.178linux.com/10139http://www.linuxidc.com/Linux/2014-04/99671.htmhttp://634871.b ...

  8. JavaScript:表单常用验证脚本(整理)

    以下内容根据网上资源整理而来,主要来源是CSDN一个供下载的check.js,源码地址找不到了. 1. 检查输入字符串是否为空或者全部都是空格 /* 检查输入字符串是否为空或者全部都是空格 输入:st ...

  9. vim:关于映射和跳出括号

    先说如何自动补全. 命令:vim .vimrc inoremap ( ()<ESC>i inoremap [ []<ESC>i inoremap { {}<ESC> ...

  10. Correlation and Regression

    Correlation and Regression Sample Covariance The covariance between two random variables is a statis ...