问题说明 #

我是CSS新手，正在制作打印用的凭证预览。使用的.titlebar类在普通视图中显示正常，但在打印预览里背景颜色完全失效：

• 普通视图效果：
• 打印预览效果：

我已经在常规样式和@media print媒体查询里都加了这段CSS：

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

页面引入的样式文件包括：

<link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="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" />

其中.titlebar的样式代码就放在AdminLTE.css里。

修复方案 #

这个问题大概率是浏览器默认打印设置限制，或者框架样式优先级冲突导致的，按以下步骤来解决：

1. 强制浏览器打印背景样式
   多数浏览器（Chrome、Firefox等）默认会关闭「打印背景图形」的选项，你可以先手动验证：

   • Chrome：打开打印预览 → 点击「更多设置」→ 勾选背景图形
   • Firefox：打印预览 → 页面设置 → 勾选打印背景（颜色和图像）
     如果手动开启后正常，就用CSS强制浏览器打印背景，在@media print里添加：

   @media print {
     .titlebar {
       /* 强制webkit内核浏览器打印背景 */
       -webkit-print-color-adjust: exact;
       /* 标准属性，覆盖其他浏览器 */
       print-color-adjust: exact;
       background: linear-gradient(to bottom, #03320E 25%, #273E29 76%) !important;
       color: #ffffff !important;
     }
   }
   

2. 提升自定义样式优先级
   因为用了AdminLTE框架，框架自带的打印样式可能覆盖了你的自定义代码。除了用!important，还可以用更具体的选择器强化优先级：

   @media print {
     body .content-wrapper .titlebar {
       -webkit-print-color-adjust: exact;
       print-color-adjust: exact;
       background: linear-gradient(to bottom, #03320E 25%, #273E29 76%);
       color: #ffffff;
     }
   }
   

   选择器可以根据你的页面DOM结构调整，越具体优先级越高。

3. 简化背景样式写法
   你原来的背景代码有冗余部分，简化后不影响效果还更易维护：

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

   rgba(0,0,0,0)、repeat scroll 0 0都是默认值，可以直接省略。

先按这几个方法试试，应该能解决打印预览里颜色不显示的问题～

内容的提问来源于stack exchange，提问作者Nadeem Ijaz