html - 颜色未显示在打印预览中，但显示在简单 View 中

Question

我是css新手，正在制作打印预览凭证。我使用的类在简单 View 上可以正常工作，但不能像打印预览那样工作。

打印预览

这是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}

这里是我包含的头文件。 assets/bootstrap/css/bootstrap.css"rel="stylesheet"type="text/css"/>
assets/font-awesome/css/font-awesome.min.css"rel="stylesheet"type="text/css"/>

<!-- 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 中，您需要按“高级设置”并选中背景图形复选框。