颜色未在打印预览中显示，但在简单视图上显示

Question

我是css的新手，并为打印制作预览凭证。 我使用的类在简单视图上正常工作但不能处理打印预览，如。

打印预览

这是css代码

.titlebar{
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #03320E 25%, #273E29 76%) repeat scroll 0 0;
    color:#ffffff}

中的相同代码

@media print{
  .titlebar{
     background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #03320E 25%, #273E29 76%) repeat scroll 0 0;
     color:#ffffff}

}

这里是我包含的头文件。     资产/引导/ CSS / bootstrap.css＆＃34;的rel =＆＃34;样式表＆＃34;类型=＆＃34;文本/ CSS＆＃34; /＆GT;
         资产/字体真棒/ CSS /字体awesome.min.css＆＃34;的rel =＆＃34;样式表＆＃34;类型=＆＃34;文本/ CSS＆＃34; /＆GT;          

<!-- AdminLTE Skins. Choose a skin from the css/skins 
     folder instead of downloading all of them to reduce the load. -->
 <link href="<?php echo base_url(); ?>assets/bootstrap-daterangepicker-master/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url(); ?>assets/dist/css/skins/_all-skins.css" rel="stylesheet" type="text/css" />

<link href="<?php echo base_url(); ?>assets/js/fileinput.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url(); ?>assets/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />

和css样式代码在AdminLTE.css中。

Answer 1

大多数浏览器都不会将背景色显示为标准。您需要在设置中使用背景颜色打印浏览器。 这是为了防止页面在打印时耗尽大量墨水。

例如，在Chrome中，您需要按＆＃34;高级设置＆＃34;并选中背景图形的复选框。

Answer 2

.titlebar{
			width: 100%;
			height: 55px;
			background: #03320E;
		    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    background: rgba(0, 0, 0, 0) -o-linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    background: rgba(0, 0, 0, 0) linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    color:#ffffff;
		}
		@media print{
			body {
			    -webkit-print-color-adjust: exact;
			}
		}

<div class="titlebar"></div>

请在@media print {}

中添加以下代码

body {
    -webkit-print-color-adjust: exact;
}