Question

有人想出如何在bootstrap 3中的进度条上打印颜色？看到2.3.2的一些黑客，但我不能在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;
}

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

Answer 1

基于之前的答案，这就是我如何从Chrome或IE打印CSS设置。 FireFox仍然无法正常工作。您需要设置每个条形颜色，但信息，成功等等。

        @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 print issues with background-color;

Answer 2

除了-webkit-print-color-adjust：exact;对于b.e. .progress-bar-success您还必须使背景可见。您可以通过将!important添加到ccs规则来执行此操作，请参阅：Background color not showing in print preview

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

要打印进度条的边框/阴影，请将!important添加到边框属性中。另请参阅：Remove shadow from printed version和text-shadow and box-shadow while printing (Chrome)

Answer 3

这是因为浏览器不打印背景（使用默认设置），但它会打印边框，我们可以使用它！试试这个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中的魅力一样。

Bootstrap 3 - 在进度条上打印颜色？

3 个答案: