用 CSS 实现打印显示底色
上一篇有讲到如何在浏览器端实现打印功能。后面发现有个问题,就是表格表头有背景颜色,但是实际打印出来无背景颜色。网上的方法主要有以下几种实现方式:
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 实现打印显示底色的更多相关文章
- css控制打印时只显示指定区域
CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...
- 用CSS创建打印页面
用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...
- css多行显示省略号
首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...
- CSS实时编辑显示
方法 CSS实时编辑显示:通过display:block让css文本显示出来,再加上contentEditable使文本可编辑 <!DOCTYPE html> <html> & ...
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
- css 图片 圆形显示区域
css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- C语言 二维数组复制、清零及打印显示
#include <stdlib.h> #include <stdio.h> #include <string.h> //二维整型数组打印显示 ],int row, ...
随机推荐
- 跳出框架iframe的操作语句
常用的iframe操作语句 ① 本页面跳转语句: "window.location.href" 或者 "location.href" ② 上一层页面跳转 ...
- PL SQL基本内容(原创)
本节介绍PL SQL的基本内容 本节所举示例数据来源oracle用户scott下的emp表和dept表,数据如下: 一.plsql简介: 1.概念:procedural language,过程化sql ...
- Python 之ConfigParser 学习笔记
一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类似于key-value 的配置 ...
- Android JSBridge的原理与实现
在Android中.JSBridge已经不是什么新奇的事物了,各家的实现方式也略有差异. 大多数人都知道WebView存在一个漏洞.见WebView中接口隐患与手机挂马利用,尽管该漏洞已经在Andro ...
- 计算机通信协议之OSI参考模型
OSI参考模型 在OSI参考模型之前人类对计算机结构的研究就已经进行了太多的讨论,最终通过了作为通信协议设计指标的OSI参考模型.这个协议将通信协议中必要的功能分成了七个部分.通过这些分层使得那些比较 ...
- java各种数据类型之间的转换
1如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseIn ...
- Nginx(二):虚拟主机配置
什么是虚拟主机? 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主机都可以是一个独立的网站,可以具有独立的域名,具有完整的Intemet服务器功 ...
- word2vec中文类似词计算和聚类的使用说明及c语言源代码
word2vec相关基础知识.下载安装參考前文:word2vec词向量中文文本相似度计算 文件夹: word2vec使用说明及源代码介绍 1.下载地址 2.中文语料 3.參数介绍 4.计算相似词语 5 ...
- Javascript玩转继承(二)
对象伪装来实现继承.在这里先来说一下这种方式的优缺点 这种方式是比较容易理解的,在子类中调用父类的构造函数.另外,这种方法最大的一个优点就是说构造继承可以实现多继承,复习下这个代码: function ...
- angular学习笔记(六)-非入侵式javascript
这篇主要讲解非入侵式javascript. 在传统的前端开发中,把js写在html中,称为入侵式的javascript: <span id="select_area" onc ...