2013年4月17日

chrome浏览器打印背景颜色和图片


chrome很好用,但是打印功能不给力。jzaun在Google Groups发起的讨论中描述,该问题自2009年该问题就存在。同时,在Chorme开发版本Chromium项目组中的Issue 2294同样报告了该问题(2008年09月),但是至今(2012年7月),该问题仍未解决。

目前,有一个临时解决方案:为body标签增加一个CSS属性-webkit-print-color-adjust: exact;
幸好Chrome提供了一个非常友好的CSS编辑功能,下面lesca简单介绍下如何操作:

打开待打印的页面
1、按快捷键Ctrl – Shift – I
2、在Elements中选中body标签
3、在右边Style中的element.style的大括号里单击,进入编辑模式
4、将-webkit-print-color-adjust: exact;粘贴进去
5、按ESC键结束编辑

到此为止,在打印预览中即可看见背景图片和颜色。

注:
1、最好把你的浏览器升级到最高版本,目前作者用24.0.1284.2版本是有效的,chrome 15不行。
2、bug还是满天飞。
首先背景不能用定位(CSS精灵),否则会导致背景拉伸
使用box-shadow会出现一条黑线,影响页面美观。
3、仅对打印有效的CSS写法:

  1. <style type=”text/css” media=”print”>………..</style>

  1. <link href=”style.css” rel=”stylesheet” type=”text/css” media=”print”>

标签:,

微信扫一扫二维码访问