Bootstrap 3-在进度条上打印颜色吗? [英] Bootstrap 3 - printing colors on progress bars?

问题描述

有人知道如何在bootstrap 3的进度条上打印颜色吗?看到了针对2.3.2的一些技巧，但我无法在引导程序3上做到这一点.

Anybody figured out how to print the colors on progress bars in bootstrap 3? Saw some hacks for 2.3.2 but I can't do it on 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;
}

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

Maybe a starting point for someone, based off of some code I found for the old workaround.

推荐答案

要基于先前的答案，这就是我如何从Chrome或IE打印CSS设置的方式.FireFox仍然不起作用.不过，您需要设置每种颜色..信息，成功等.

To build on the prior answer this is how I have the CSS setup to print from Chrome or IE. FireFox still does not work. You'll need to set up each bar color though.. info, success, etc.

        @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带有背景颜色的打印问题；

这篇关于Bootstrap 3-在进度条上打印颜色吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！