CSS/SCSS/bootstrap :: sovrascrive le impostazioni di stampa in bootstrap :: cambia sfondo: trasparente! importante per un colore

Question

Ho un problema con il bootstrap CSS/print.

In bootstrap CSS (reset.css) tutto è il nulla osta per la stampa

@media print { 
    * { 
    text-shadow: none !important; 
    color: black !important; 
    background: transparent !important; 
    box-shadow: none !important; 
    } 
} 

Ma devo stampare diverse linee di colore. Il mio tavolo si presenta così:

<div class="container"> 
    <div id="task-summary"> 
     <div id="process-summary"> 
      <table class="table table-condensed"> 
       <tbody> 
        <tr class="success"> 
         <td> 

ho EMBEDED questo nel mio codice, ma non funziona:

@media print { 

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

Ho già provato se il CSS è eccettuato utilizzando display: none .. funziona (la linea non viene visualizzata) e sembra essere nel posto giusto.

Qualcuno ha un'idea di come sia possibile eseguire l'override del comando cst bootstrap, senza modificare il file reset.css di bootstrap?

Answer 1

@media print { 
    .success { 
     background-color: #DFF0D7 !important; 
    }  
} 

O

@media print { 
    #task-summary .success { 
     background-color: #DFF0D7 !important; 
    } 
} 

O

@media print { 
    #task-summary > #process-summary .success { 
     background-color: #DFF0D7; 
    } 
} 

Answer 2

Ho avuto lo stesso problema. Quando si stampa la pagina l'opzione background-color: ...; non funziona alle righe della tabella. Modificare il selettore CSS su:

@media print { 

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

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

Tutto dovrebbe funzionare dopo questi cambiamenti.