Il colore di sfondo non viene visualizzato nell'anteprima di stampa

Sto provando a stampare una pagina. In quella pagina ho dato a una tabella un colore di sfondo. Quando visualizzo l'anteprima di stampa in Chrome non assume la proprietà del colore di sfondo ...

Quindi ho provato questa proprietà:

-webkit-print-color-adjust: exact; 

ma continua a non mostrare il colore.

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

La proprietà Chrome CSS -webkit-print-color-adjust: exact;funziona in modo appropriato.

Tuttavia, assicurarsi di disporre del CSS corretto per la stampa può essere spesso complicato. Diverse cose possono essere fatte per evitare le difficoltà che stai incontrando. Innanzitutto, separa tutti i CSS di stampa dal CSS dello schermo. Questo viene fatto tramite @media printe @media screen.

Spesso la configurazione di alcuni @media printCSS extra non è sufficiente perché durante la stampa sono inclusi anche tutti gli altri CSS. In questi casi devi solo essere consapevole della specificità CSS in quanto le regole di stampa non vincono automaticamente contro le regole CSS non stampate.

Nel tuo caso, -webkit-print-color-adjust: exactfunziona. Tuttavia, le tue background-colordefinizioni di colore e vengono cancellate da altri CSS con specificità più elevata.

Anche se non approvo l'utilizzo !importantin quasi tutte le circostanze, le seguenti definizioni funzionano correttamente ed espongono il problema:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Ecco il violino (e incorporato per facilitare l'anteprima della stampa).

Quella proprietà CSS è tutto ciò che serve per me funziona. Durante l'anteprima in Chrome hai la possibilità di vederlo in bianco e nero ( Colore: Opzioni - Colore o Bianco e nero ), quindi se non hai quell'opzione, allora Ti suggerisco di prendere questa estensione di Chrome e semplificarti la vita:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

Il sito che hai aggiunto su violino ha bisogno di questo nel tuo media print css (devi solo aggiungerlo ...

media stampa CSS nel corpo:

@media print {
body {-webkit-print-color-adjust: exact;}
}

AGGIORNA OK, quindi il tuo problema è bootstrap.css ... ha un css di stampa multimediale e anche tu .... lo rimuovi e quello dovrebbe darti colore .... devi fare il tuo o attenersi bootstraps stampa css.

Quando faccio clic su Stampa su questo vedo il colore .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Chrome non eseguirà il rendering del colore di sfondo o di molti altri stili durante la stampa se l'impostazione della grafica di sfondo è disattivata.

Questo non ha nulla a che fare con css, @media o specificità. Probabilmente puoi aggirarti, ma il modo più semplice per ottenere Chrome per mostrare il colore di sfondo e altri elementi grafici è selezionare correttamente questa casella di controllo in Altre impostazioni.

Avevo solo bisogno di aggiungere l' !importantattributo al tag color-background per mostrarlo, non avevo bisogno della parte webkit:

background-color: #f5f5f5 !important;

Se stai usando bootstrap o qualsiasi altro CSS di terze parti, assicurati di specificare la schermata del supporto solo su di essa, in modo da avere il controllo del tipo di supporto di stampa nei tuoi file CSS:

<link rel="stylesheet" media="screen" href="">

Il tuo CSS deve essere così:

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}

PER CHI UTILIZZA BOOTSTRAP.CSS, questa è la soluzione!

Ho provato tutte le soluzioni e non funzionavano ... fino a quando non ho scoperto che bootstrap.css aveva un super fastidioso @media printche ripristina tutti i tuoi colori, i colori di sfondo, le ombre, ecc ...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

Quindi rimuovere questa sezione da bootstrap.css (o bootstrap.min.css)

O sovrascrivi questi valori nel css della pagina che desideri stampare nel tuo @media print

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

Usa quanto segue nel tuo @media printfoglio di stile.

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

Ecco un paio di cose da notare:

• il colore di sfondo è il fallback assoluto ed è principalmente per i posteri.
• immagine di sfondo utilizza un pixel 1px x 1px di # 404040 trasformato in un PNG. Se l'utente ha le immagini abilitate, potrebbe funzionare, altrimenti ...
• Imposta il box-shadow, se non funziona ...
• Bordo = 1/2 dell'altezza desiderata e / o larghezza della scatola, solido, colore. Nell'esempio sopra ho voluto una scatola di altezza 60px.
• Azzera l'altezza / larghezza in base a ciò che stai controllando nell'attributo border.
• Il colore del carattere sarà automaticamente impostato sul nero, a meno che tu non lo usi!
• Impostare l'altezza della linea su 0 per correggere la casella che non ha dimensione fisica.
• Crea e ospita i tuoi PNG :-)
• Se il testo nel blocco deve essere racchiuso, mettilo in un div e posiziona il div usando position: relative; e rimuovere l'altezza della linea.

Vedi il mio violino per una dimostrazione più dettagliata.

Sei sicuro che si tratti di un problema CSS? Ci sono alcuni post su Google su questo problema: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Potrebbe essere correlato al processo di stampa. Su Safari, che è anche webkit, è presente una casella di controllo per stampare immagini e colori di sfondo nella finestra di dialogo della stampante.

Per IE

Se stai usando IE, vai all'anteprima di stampa (fai clic destro sul documento -> anteprima di stampa), vai alle impostazioni e c'è l'opzione "stampa il colore di sfondo e le immagini", seleziona quell'opzione e prova.

C'è uno stile nei file css bootstrap in @media print {* ,: after,: before ....} che ha gli stili di colore e di sfondo etichettati! Important, che rimuovono qualsiasi colore di sfondo su qualsiasi elemento. Uccidi quei due pezzi di css e funzionerà.

Bootstrap sta prendendo la decisione di eseguire che non si dovrebbe mai avere alcun colore di sfondo nelle stampe, quindi è necessario modificare i loro CSS o avere un altro stile importante che ha una precedenza più alta. Bootstrap di buon lavoro ...

Ho usato la risposta di purgatory101 ma ho avuto problemi a mantenere tutti i colori (icone, sfondi, colori del testo ecc ...), in particolare che i fogli di stile CSS non possono essere utilizzati con le librerie che cambiano dinamicamente i colori dell'elemento DOM. Quindi ecco uno script che cambia gli stili degli elementi ( background-coloure colour) prima della stampa e cancella gli stili una volta effettuata la stampa. È utile evitare di scrivere molti CSS in a@media print foglio di stile in quanto funziona qualunque sia la struttura della pagina.

C'è una parte dello script appositamente creata per mantenere il colore delle icone FontAwesome (o qualsiasi elemento che utilizza un :beforeselettore per inserire contenuti colorati).

JSFiddle che mostra la sceneggiatura in azione

Compatibilità: funziona in Chrome, non ho testato altri browser.

function setColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var eltBackground = $(elements[i]).css('background-color');
    var eltColor = $(elements[i]).css('color');

    var elementStyle = elements[i].style;
    if (eltBackground) {
      elementStyle.oldBackgroundColor = {
        value: elementStyle.backgroundColor,
        importance: elementStyle.getPropertyPriority('background-color'),
      };
      elementStyle.setProperty('background-color', eltBackground, 'important');
    }
    if (eltColor) {
      elementStyle.oldColor = {
        value: elementStyle.color,
        importance: elementStyle.getPropertyPriority('color'),
      };
      elementStyle.setProperty('color', eltColor, 'important');
    }
  }
}

function resetColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var elementStyle = elements[i].style;

    if (elementStyle.oldBackgroundColor) {
      elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
      delete elementStyle.oldBackgroundColor;
    } else {
      elementStyle.setProperty('background-color', '', '');
    }
    if (elementStyle.oldColor) {
      elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
      delete elementStyle.oldColor;
    } else {
      elementStyle.setProperty('color', '', '');
    }
  }
}

function setIconColors(icons) {
  var css = '';
  $(icons).each(function (k, elt) {
    var selector = $(elt)
      .parents()
      .map(function () { return this.tagName; })
      .get()
      .reverse()
      .concat([this.nodeName])
      .join('>');

    var id = $(elt).attr('id');
    if (id) {
      selector += '#' + id;
    }

    var classNames = $(elt).attr('class');
    if (classNames) {
      selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
    }

    css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
  });
  $('head').append('<style id="print-icons-style">' + css + '</style>');
}

function resetIconColors() {
  $('#print-icons-style').remove();
}

Quindi modificare la window.printfunzione per impostare gli stili prima di stamparli e ripristinarli dopo.

window._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

La parte che trova i percorsi delle icone per cui creare CSS: before elements è una copia di questa risposta SO

Puoi anche usare la box-shadowproprietà.

se stai usando Bootstrap .just usa questo codice nel tuo file css personalizzato. Bootstrap rimuove tutti i colori nell'anteprima di stampa.

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

Se scarichi Bootstrap senza l'opzione "Stampa stili di supporto", non avrai questo problema e non dovrai rimuovere manualmente il codice "@media print" nel tuo file bootstrap.css.

La migliore soluzione per questo se stai usando bootstrap quindi fai una cosa e rimuovi @media print {} tutto il codice all'interno di questo. e abilita la grafica di sfondo da più impostazioni durante l'anteprima di stampa.

Doppio caricamento del mio file sorgente CSS esterno e cambio media = "screen" in media = "print" e sono stati mostrati tutti i bordi della mia tabella

Prova questo :

<link rel="stylesheet" media="print" href="bootstrap.css" />

<link rel="stylesheet" media="screen" href="bootstrap.css" />