0

有人知道如何在 bootstrap 3 中打印进度条上的颜色吗？看到 2.3.2 的一些 hack，但我不能在 bootstrap 3 上做到这一点。

.progress {
    background-image: none;
    -webkit-print-color-adjust: exact;
    box-shadow: inset 0 0;
    -webkit-box-shadow: inset 0 0;
}
.progress > .progress-bar {
    background-image: none;
    -webkit-print-color-adjust: exact;
    box-shadow: inset 0 0;
    -webkit-box-shadow: inset 0 0;
}

根据我为旧解决方法找到的一些代码，也许是某人的起点。

4

3 回答 3

1

为了建立先前的答案，这就是我从 Chrome 或 IE 打印 CSS 设置的方式。火狐还是不行。不过，您需要设置每种条形颜色.. 信息、成功等。

        @media print{       
            .progress{
                background-color: #F5F5F5 !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
            }
            .progress-bar-info{
                display: block !important;
                background-color: #5BC0DE !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
            }

            .progress, .progress > .progress-bar {
                display: block !important;
                -webkit-print-color-adjust: exact !important;

                box-shadow: inset 0 0 !important;
                -webkit-box-shadow: inset 0 0 !important;
            }   
        }

参考： CSS @media 打印背景颜色问题；

于 2013-09-30T14:46:19.987 回答
0

在 -webkit-print-color-adjust: 旁边；因为.progress-bar-success你必须使背景也可见。您可以通过添加!important到 ccs 规则来做到这一点，请参阅：打印预览中不显示背景颜色

在不同的样式表中添加/绑定不同的打印样式@media print。

为了打印进度条的边框/阴影，也添加!important到边框属性。另请参阅：从打印版本中删除阴影以及打印时的文本阴影和框阴影 (Chrome)

于 2013-09-11T08:56:28.297 回答
0

这是因为浏览器不打印背景（使用默认设置），但它打印边框，我们可以使用它！试试这个https://stackoverflow.com/a/46216102/8601222

评论后编辑

您可以为@media print 添加这个（我的LESS-CSS代码）：

@media print {
.progress {
    position: relative;
    &:before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        border-bottom: @line-height-computed solid @gray-lighter;
    }
    &-bar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-bottom: @line-height-computed solid @brand-primary;
        &-success {
            border-bottom-color: @brand-success;
        }
        &-info {
            border-bottom-color: @brand-info;
        }
        &-warning {
            border-bottom-color: @brand-warning;
        }
        &-danger {
            border-bottom-color: @brand-danger;
        }
    }
}
}

编译的 CSS（带有我的变量）：

@media print {
.progress {
    position: relative;
}
.progress:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-bottom: 2rem solid #eeeeee;
}
.progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-bottom: 2rem solid #337ab7;
}
.progress-bar-success {
    border-bottom-color: #67c600;
}
.progress-bar-info {
    border-bottom-color: #5bc0de;
}
.progress-bar-warning {
    border-bottom-color: #f0a839;
}
.progress-bar-danger {
    border-bottom-color: #ee2f31;
}
}

像 Bootstrap 3 中的魅力一样工作。

于 2017-09-14T10:08:37.243 回答