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

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. Hadoop On Demand

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hod.html 简介 文档 简介 Hadoop On Demand(HOD)是一个能在大型物理集群上供应虚拟 ...

  2. 控件不响应OnMouseMove

    原文链接: http://bbs.csdn.net/topics/370017205 问:我继承CStatic写了个CStaticEx,设为Rectangle类型,用来画图.把这个控件添加到了一个Vi ...

  3. Windwos配置Maven环境变量

    下载Maven插件:http://maven.apache.org/download.cgi 添加环境变量: MAVEN_HOMEE:\Program Files\Apache Software Fo ...

  4. Centos编译Hadoop 2.x 源码

    1. 前言 Hadoop-2.4.0的源码目录下有个BUILDING.txt文件,它介绍了如何在Linux和Windows下编译源代码,本文基本是遵照BUILDING.txt指示来操作的,这里再做一下 ...

  5. cocos2d-x开发记录:一,搭建环境

    首先我下载的cocos2D版本为2.1.2版本,我们安装好VS后,新建一个解决方案,这里很重要,假设我的cocos解压后的路径为E:\cocos2d-2.1rc0-x-2.1.2-hotfix\coc ...

  6. Apache2.2配置小结.

    lamp 1.编译安装 2,日志轮循 3,优化 4,排错 4,1 vhost :NameServer 4,2 403:虚拟主机,给目录在主配置文件里添加配置 4.3 首页文件 初始化安装完成后,如果不 ...

  7. 【Android】3.4 图层展示

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 3.4 示例4--图层展示 一.简介 1.地图类型 百度地图Android SDK 3.7.1提供了两种类型的 ...

  8. 【Android】自己定义ListView的Adapter报空指针异常解决方法

    刚刚使用ViewHolder的方法拉取ListView的数据,可是总会报异常. 细致查看代码.都正确. 后来打开adapter类,发现getView的返回值为null. 即return null. 将 ...

  9. java多线程实验 滚动字

    package com.rgy.Test; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt ...

  10. zabbix应用之Low-level discovery监控磁盘IO

    参考文章: http://qicheng0211.blog.51cto.com/3958621/1599776/ zabbix自带的"Template OS Linux"模板支持监 ...