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

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. USB协议及认知

    1.USB的拓扑结构决定了主机控制器就是最高统帅,没有主机控制器的要求设备永远不能主动发数据.所以主机控制器在USB 的世界里扮演着重要的角色,它是幕后操纵者. 2.数据包的发送, 这个过程包含很多信 ...

  2. Python find() 方法

    描述 Python find() 方法从字符串中找出某个子字符串第一个匹配项的索引位置,该方法与index() 方法一样,只不过如果子字符串不在字符串中不会报异常,而是返回-1. 语法 find() ...

  3. powerdesigner基础操作

    一.建表 1.       打开PowerDesigner,点击File->New 2.       选择Conceptual Data Model,并修改Model name. 3.      ...

  4. PixelLink

    简介 论文题目:PixelLink: Detecting Scene Text via Instance Segmentation 论文地址:https://arxiv.org/abs/1801.01 ...

  5. 计算机通信协议之OSI参考模型

    OSI参考模型 在OSI参考模型之前人类对计算机结构的研究就已经进行了太多的讨论,最终通过了作为通信协议设计指标的OSI参考模型.这个协议将通信协议中必要的功能分成了七个部分.通过这些分层使得那些比较 ...

  6. SpringCloud 分布式配置

    转 http://www.cnblogs.com/zhangjianbin/p/6347247.html 前言 在单体式应用中,我们通常的做法是将配置文件和代码放在一起,这没有什么不妥.当你的应用变得 ...

  7. Latch: Row Cache Objects (One bug?)

    During the performance test, observe the following condition in the database server from EM, And the ...

  8. [k8s]容器化node-expolore(9100)+cadvisor(8080)+prometheus(9090) metric搜集,grafana展示

    Prometheus 的核心,多维数据模型 传统监控工具统计数据方式 指标多 - 需求1,统计app1-3,的(总)内存,则定义3个指标 container.memory_usage_bytes.we ...

  9. 转:python常用运维脚本实例

    python常用运维脚本实例 转载  file是一个类,使用file('file_name', 'r+')这种方式打开文件,返回一个file对象,以写模式打开文件不存在则会被创建.但是更推荐使用内置函 ...

  10. AI落地企业业务的一些问题

    这两年大家都在喊未来已来,软件企业不管有没有算法工程师都竖起了AI的大旗,传统企业不管现在OA现状如何都想在数据转型.智能制造.机器智能方面尝尝鲜,感觉好像和前两年的互联网+风潮有点像,最近半年我在某 ...