CSS/SCSS/bootstrap :: 覆盖 bootstrap 中的打印设置 :: 更改背景：透明！对颜色很重要

Posted 2023-03-06

【中文标题】CSS/SCSS/bootstrap :: 覆盖 bootstrap 中的打印设置 :: 更改背景：透明！对颜色很重要

【英文标题】：CSS/SCSS/bootstrap :: override print settings in bootstrap :: change background:transparent ! important to a color

【发布时间】：2013-03-17 12:14:58

【问题描述】：

我的引导 CSS/打印有问题。

在引导 CSS (reset.css) 中，所有内容都已清除以供打印

@media print 
  * 
    text-shadow: none !important;
    color: black !important;
    background: transparent !important;
    box-shadow: none !important;
  

但我必须打印几行彩色。我的桌子是这样的：

<div class="container">
    <div id="task-summary">
        <div id="process-summary">
            <table class="table table-condensed">
                <tbody>
                    <tr class="success">
                        <td>

我将它嵌入到我的代码中，但它不起作用：

@media print 

  #task-summary
    .success
      background-color: #DFF0D7 !important;
    
  

我已经尝试过使用 display: none 是否排除 css .. 它可以工作（不显示行）并且似乎在正确的位置。

有人知道如何在不编辑 bootstrap 的 reset.css 的情况下设法覆盖 bootstrap css 命令吗？

【问题讨论】：

您的浏览器可能试图变得聪明并拒绝打印背景颜色。检查您的浏览器设置。

您用户的浏览器设置将覆盖此设置，请参阅此答案：***.com/a/3894013/1064286

谢谢sevenseacat，你给了我正确的方向......用-webkit-print-color-adjust:exact;为chrome7safari修复了它；现在将谷歌寻找IE的解决方案

检查你的嵌套...

【参考方案1】：

我遇到了同样的问题。当您打印页面时，background-color: ...; 选项在表格行中不起作用。将 CSS-Selector 更改为：

@media print 

  #task-summary .success td 
    background-color: #DFF0D7 !important;

    /* add this line for better support in chrome */ 
    -webkit-print-color-adjust:exact;
  

在此更改后一切都应该正常工作。

【讨论】：

它是“-webkit-print-color-adjust:exact;”让这对我有用的行。

【参考方案2】：

@media print 
    .success 
      background-color: #DFF0D7 !important;
        

或者

@media print 
    #task-summary .success 
      background-color: #DFF0D7 !important;
      

或者

@media print 
    #task-summary > #process-summary .success 
      background-color: #DFF0D7;