Bootstrap打印CSS删除背景颜色

Question

当我使用bootstrap时,它会在我尝试打印页面时删除背景颜色.几乎我网站上的所有内容都是使用bootstrap类,所以我想在bootstrap之外避免很多手动CSS.我发现bootstrap @media print用来删除背景颜色.我也使用了一个bootstrap主题(主题联合),它也删除了背景颜色.

主题united.css

@media print
*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

bootstrap.min.css

@media print
*, :after, :before {
    color: rgb(0, 0, 0)!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;

有没有办法确保在打印时不删除背景颜色而不编辑这2个CSS文件？

例如:当我使用.alert-danger时,我希望在屏幕上显示警告危险,因此将打印为红色框.

见JSFiddle:http: //jsfiddle.net/7mtk7wrh/

Answer 1

不幸的是,你的问题没有一个好的答案 - 但也许如果你理解为什么那么你就可以选择前进的方向.

为什么？

Bootstrap确实使用了@media print { * { color: $fff; background: transparent; }}- 但是有一个非常可靠的原因.这段代码实际上来自normalizer.css项目(由当时的@mdo大学,@ necolas) - 它的目的是使所有浏览器的行为相同.这些家伙选择"正常化"css是有充分理由的:

对于大多数浏览器,可以选择包含或排除背景颜色,因此即使在同一浏览器中,行为也不是标准的.想象一下,一个背景非常暗的白色文本的网站 - 当关闭背景打印时,看起来你什么都不打印 - 实际上你在没有(白色)背景上打印白色文字.

没有办法考虑到颜色的所有不同用途,因此他们选择黑色(字体)和白色(背景,实际上是"透明").甚至黑色的选择也被充分考虑 - 它是一种更好的打印解决方案,因为大多数彩色打印机都有更多的黑色"墨水/墨粉"(更经济),并且它们不需要混合颜色来制作黑色(如此之快).

请记住,Bootstrap也是一个"框架" - 如果你愿意的话,这是一个起点 - 并且赞扬@mdo和@necolas在建立可预测的基线方面有先见之明的想法. (不,我不认识他们.)

不...

因此,这里的想法是:"如果我们可以'回去’什么,并没有设置这个不幸的是CSS不喜欢的工作 - 是浏览器加载CSS声明的'队列’里的最后声明者胜(LIFO或后进-first-out),但我不知道有什么方法可以删除这个堆栈.所以CSS开发人员只需添加更多内容......

所以我们可以假设我们可以回去那样 - 添加一个* { background-color: inherit }.问题是inherit恢复到父属性,但是*是根,因此没有任何内容可以恢复.同样的initial!

也许!

所以我们留下了4个选项,它们都不是你所希望的,但它就是它的本质.按难度顺序:

1. 下载BS(less或sass)源代码,编辑有问题的代码,然后进行编译.(您需要使用本地副本,CDN将无法使用.)
2. 下载您选择的CSS变体,搜索并删除有问题的代码.(再没有CDN.)
3. 使用getbootstrap.com/customize创建新变体 - 排除"Common CSS"下的"Print media styles".(再次,没有CDN的)
4. 覆盖要打印颜色的特定项目:例如

    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

CDN的BS副本现在可以使用了,但是你遇到的问题是用户可能不打印背景并且输出白色(例如黄色)白色!

最后

好吧,我希望了解为什么至少是一种思考解决方法的方法.我遵循的一般经验法则是,在打印时,背景(应该)始终是白色.当你受限于这种方式时,你开始考虑新颖的想法,比如文本周围的感叹号只有"打印"(@media only screen { .hidden-screen { display: none; }})

Answer 2

尽管!important普遍不赞成使用，但这是有问题的代码bootstrap.css

.table td,
.table th {
    background-color: #fff !important;
}

假设您正在尝试设置以下 HTML 的样式：

<table class="table">
    <tr class="highlighted">
      <th>Name</th>
      <th>School</th>
      <th>Height</th>
      <th>Weight</th>
    </tr>
</table>

要覆盖此 CSS，请在样式表中放置以下（更具体的）规则：

@media print {
    table tr.highlighted > th {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

这是有效的，因为规则比引导默认值更具体。