用 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, ...
随机推荐
- [原创] Java JDBC连接数据库,反射创建实体类对象并赋值数据库行记录(支持存储过程)
1.SqlHelper.java import java.lang.reflect.*; import java.sql.*; import java.util.*; public class Sql ...
- .Net程序猿玩转Android开发---(11)页面跳转
在不论什么程序开发中,都会遇到页面之间跳转的情况,Android开发也不例外.这一节,我们来认识下Android项目中如何进行页面跳转.页面跳转分为有參数和无參数页面跳转,已经接受还有一个页面的返回值 ...
- 修改 Input placeholder 的样式
::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Fi ...
- linux extundelete 删除文件恢复
extundelete是基于Linux的一个数据恢复工具,它通过分析文件系统的日志,解析出所有文件的inode信息,从而可以恢复Linux下主流的ext3,ext4文件系统下被误删除的文件. [问题案 ...
- Latex学习——长竖线及长括号
Latex学习——长竖线及长括号 文章修改中要求把花括号和竖线变长,查了下发现下面的几种方法: 1.花括号“{ }”变长: \$ \left\{... content...... ...
- 使用dockerfile 构建springboot 的docker镜像
1 新建一个 springboot 项目,并将其打包成 jar 文件.生成demo1.jar 文件 请参考 使用springBoot搭建REATFul风格的web demo 2 编写 dockerfi ...
- ubuntu14.4开启ftp服务
1 更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码" ...
- Android开发15——给TextView加上滚动条
给TextView加上滚动条非常简单,只需要把TextView标签放在ScrollView标签中 <ScrollView android:layout_width="wrap_cont ...
- LeetCode242——Valid Anagram
Given two strings s and t, write a function to determine if t is an anagram of s. For example, s = & ...
- sudo apt-get update 时出现的hit、ign、get的含义
hit,命中表示链接上这个网站 get获取表示有更新并且下载, ign忽略表示无更新或者更新无关紧要或者不需要,譬如某些插件系统已经有了或者语言翻译包