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

CSS

小胖

2020-03-23

我对引导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来排除css：none ..它有效（不显示行）并且似乎在正确的位置。

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

第3011篇《CSS / SCSS / bootstrap 覆盖bootstrap 中的打印设置 更改背景：透明！对颜色很重要》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
西门 2020.03.23 
@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;
    }
}
Gil 2020.03.23

我有同样的问题。当您打印页面时，该background-color: ...;选项不适用于表格行。将CSS选择器更改为：

@media print {

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

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

更改后，一切都会正常。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android