Problemi di stampa CSS @media con colore di sfondo;

176

Sono nuovo qui in questa azienda e abbiamo un prodotto che utilizza miglia di css. Sto tentando di creare un foglio di stile stampabile per la nostra app ma sto riscontrando problemi con background-colorin @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Tutto il resto funziona, posso modificare i bordi e simili, ma background-colornon verrà visualizzato nella stampa. Ora capisco che potreste non essere in grado di rispondere alla mia domanda senza ulteriori dettagli. Ero solo curioso di sapere se qualcuno avesse avuto questo problema o qualcosa di simile prima.

css media-queries

— Weston Watson
fonte

Bene, passa il W3C CSS-Validator ( jigsaw.w3.org/css-validator ). È strano

— GôTô

Questo non dovrebbe più essere un problema. Sono arrivato a questo problema perché avevo una pagina bootstrap e bootstrap ha una @media printquery che rimuove i colori di sfondo dalle tabelle (ad es. Strisce).

— Martin Thoma,

@MartinThoma Come hai risolto il problema? Hai rimosso il CSS dal modello di manifest?

— EduLopez,

242

Se un utente ha "Stampa colori e immagini di sfondo" disattivato nelle impostazioni di stampa, nessun CSS lo sostituirà, quindi tienilo sempre conto. Questa è un'impostazione predefinita .

Una volta impostato in modo da stampare i colori e le immagini di sfondo, ciò che hai lì funzionerà.

Si trova in diversi punti. In IE9beta si trova in Stampa-> Opzioni pagina in Opzioni carta

In FireFox è in Imposta pagina -> scheda [Formato e opzioni] in Opzioni.

— Ryan Ternier
fonte

10

fantastico, mi hai appena risparmiato ore a farmi impazzire su questo CSS.

— Weston Watson,

162

Con Chrome e Safari puoi aggiungere lo stile css "-webkit-print-color-Adjust: preciso;" all'elemento per forzare la stampa del colore di sfondo e / o dell'immagine

— Marco Bettiolo

11

@MarcoBettiolo non sembra funzionare sugli ultimi build di webkit, ma comunque importante

— Hedde van der Heide

2

Aggiungendo! Importante alla regola risolto anche per me.

— Thiago Duarte,

14

Per espandere questo, ho aggiunto color-Adjust: esatto; per far funzionare FF. Quindi il mio codice completo è*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

— BitBug il

253

Per abilitare la stampa in background in Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}

— drolex
fonte

7

Questo sembra aver risolto il mio problema con la stampa di una tabella con colori di riga alternativi.

— Victor J. Garcia,

Assicurati di utilizzare l'involucro corretto per il percorso dell'immagine poiché la finestra di dialogo di stampa di Chrome non carica le immagini al primo tentativo. Ciò accade solo nel caso in cui l'URL della proprietà dell'immagine di sfondo non corrisponda al case del nome della cartella fisica. (Segnalato nella versione 48.0.2564.109 m)

— MPaul,

3

qual è l'alternativa in Firefox e IE

— Shan Khan,

6

Una nota per i futuri viaggiatori nel tempo: potresti preferire color-adjustinvece utilizzarli .

— Константин Ван,

@ КонстантинВан non è supportato in Chrome a partire da aprile 2019. Questa è la documentazione di Firefox.

— Thomas,

83

Fatto:

CSS:

box-shadow: inset 0 0 0 1000px gold;

Funziona con tutte le scatole, comprese le celle della tabella !!!

(Se si deve credere al file di output della stampante PDF ..?)
Testato solo su Chrome + Firefox su Ubuntu ...

— T4NK3R
fonte

5

Puoi aggiungere il supporto IE8 e IE9 con

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */

Se vuoi che le tue immagini sprite siano visibili, usa la tecnica img / clip css-tricks.com/css-sprites-with-inline-images , che ti darà immagini in IE9 e FF ( non IE8 però)

— emik

2

Funziona alla grande nei browser normali, ma non in IE, anche con il suggerimento di @evami.

— Woz

@woz L'ho funzionante in un progetto con IE8 / 9. Il gradiente (proprio come box-shadow) aggiunge un ulteriore elemento di sfondo che non viene eliminato dal ripristino forzato del browser. ti dispiacerebbe condividere il tuo CSS?

— emik,

2

Questo non sembra funzionare con l'ultimo Chrome (60).

— swervo,

1

Questo non riesce per me in Chrome. Sto usando 69. Ciò suggerisce che è stato rotto almeno dal 60 (secondo il commento di @ swervo).

— iconoclasta,

34

Prova questo, ha funzionato per me su Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

— MAXE
fonte

22

-webkit-print-color-adjust: exact; da solois Not enough devi usare !importantcon l'attributo

questa è l'anteprima di stampa su Chrome dopo che ho aggiunto !importanta ciascuno background-colore colorattrubute in ogni tag

e questa è la stampa dell'anteprima su Chrome prima di aggiungere!important

ora, per sapere come inject !importantdiv stile, controlla questa risposta Non riesco a iniettare uno stile con una regola "! importante"

— Basheer AL-MOMANI
fonte

Forse è perché hai già un foglio di stile @print che reimposta il colore di sfondo.

— Niccolò M.

OH MIO DIO! funziona ma come funziona? Puoi per favore spiegare.

— rahim.nagori

1

Questa è l'unica soluzione che ha funzionato per me finora. <div style = "- webkit-print-color-Adjust: esatto! importante; colore di sfondo: rosso! importante;"> ... </div>

— Thomas

10

Due soluzioni che funzionano (almeno su Chrome moderno - non sono state testate oltre):

! importante diritto nelle normali dichiarazioni di CSS (nemmeno nella stampa @media)
Usa svg

— yar1
fonte

6

! important risolve il problema in ogni browser moderno, purché "Stampa colori e immagini di sfondo" sia abilitato.

— Chris Hynes,

2

! important funziona anche senza l'intervento dell'utente se lo usi insieme a body {-webkit-print-color-Adjust: esatto; } (come da commento sopra)

— yar1

2

ho scoperto che se uso color-adjusto la variante di webkit in realtà non ho bisogno della regola importante.

— Kasapo,

7

Se stai cercando di creare pagine "facili da stampare", ti consiglio di aggiungere "! Important" al tuo CSS di stampa @media. Questo incoraggia la maggior parte dei browser a stampare immagini di sfondo, colori, ecc.

ESEMPI:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

— dadi-n-beer
fonte

6

C'è un altro trucco che puoi fare senza attivare l'opzione del bordo di stampa menzionata in altri post. Poiché i bordi sono stampati, puoi simulare colori di sfondo solidi con questo trucco:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

Attivalo aggiungendo la classe al tuo elemento:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

Sebbene ciò richieda un po 'di codice in più e un po' di attenzione in più per rendere visibili i colori di sfondo, è tuttavia l'unica soluzione a me nota.

Nota che questo hack non funzionerà su elementi diversi da display: block;o display: table-cell;, quindi ad esempio <table class="your-background">e <tr class="your-background">non funzionerà.

Usiamo questo per ottenere i colori di sfondo in tutti i browser (ancora, IE9 + richiesto).

— nocciolo
fonte

1

è un trucco folle, ma almeno forza una qualche forma di colore di sfondo indipendentemente dalle impostazioni di stampa. geniale, grazie.

— Brad Zacher il

6

Per Chrome, ho usato qualcosa del genere e ha funzionato per me.

All'interno del tag body,

<body style="-webkit-print-color-adjust: exact;"> </body>

O per un elemento particolare, diciamo che se hai una tabella e vuoi riempire una td cioè una cella,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

— Aamir Shaikh
fonte

5

Nonostante l' !importantutilizzo sia generalmente disapprovato, questo è il codice offensivo in bootstrap.csscui impedisce di stampare le righe della tabella background-color.

.table td,
.table th {
    background-color: #fff !important;
}

Supponiamo che tu stia provando a definire il seguente HTML:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Per sovrascrivere questo CSS, inserisci la seguente (più specifica) regola nel tuo foglio di stile:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Questo funziona perché la regola è più specifica del default bootstrap.

— The Aelfinn
fonte

Dopo ore di ricerche, ho trovato questa risposta. Sono entrato ed ho eliminato le linee da Bootstrap.css e WHAM! Colori sullo sfondo stampabile!

— Potente Ferengi,

1

Grazie! Infine, questa è la risposta che mi ha reso operativo, ma ho dovuto aggiungere: body {-webkit-print-color-Adjust: preciso! Importante; }

— Ocean Airdrop,

3

Ho riscontrato questo problema, perché ho riscontrato un problema simile quando provavo a generare un PDF da un output HTML in Google Apps Script in cui i colori di sfondo non venivano "stampati".

Le -webkit-print-color-adjust:exact;e !importantsoluzioni, naturalmente, non ha funzionato, ma l' box-shadow: inset 0 0 0 1000px gold;ha fatto ... grande hack, vi ringrazio molto :)

— LogoL
fonte

2

Ho pensato di aggiungere un recente e rilevante aiuto del 2015 da una recente esperienza di stampa css.

È stato in grado di stampare sfondi e colori indipendentemente dalle impostazioni della finestra di dialogo di stampa.

Per fare questo, ho dovuto usare una combinazione di ! Important & -webkit-print-color-Adjust: esatto! Importante per ottenere una stampa corretta dello sfondo e dei colori.

Inoltre, quando ho dichiarato i colori, ho scoperto che le aree più ostinate necessitavano di una definizione direttamente sul tuo target. Per esempio:

<div class="foo">
 <p class="red">Some text</p>
</div>

E il tuo CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

— Jonathan
fonte

2

Testato e funzionante su Chrome, Firefox, Opera e Edge entro il 2016/10. Dovrebbe funzionare su qualsiasi browser e dovrebbe sempre apparire come previsto.

Ok, ho fatto un piccolo esperimento cross-browser per la stampa di colori di sfondo. Copia, incolla e divertiti!

Ecco una pagina HTML stampabile completa per bootstrap:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

— Heroselohim
fonte

1

La migliore "soluzione" che ho trovato è quella di fornire un pulsante o un collegamento "Stampa" ben visibile che si apre in una piccola finestra di dialogo che spiega in modo audace, breve e conciso che devono regolare le impostazioni della stampante (con un'istruzione punto 123 ABC) per abilitare lo sfondo e stampa di immagini. Questo ha avuto molto successo per me.

— alano
fonte

1

In alcuni casi (blocchi senza alcun contenuto, ma con sfondo) può essere sovrascritto usando i bordi, individualmente per ogni blocco.

Per esempio:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

— Gedeon
fonte

0

Puoi usare il tag canvase "disegnare" lo sfondo, che funziona su IE9, Gecko e Webkit.

— Thomas Lecavelier
fonte

0

Se non ti dispiace usare un'immagine anziché un colore di sfondo (o forse un'immagine con il tuo colore di sfondo), la soluzione seguente ha funzionato per me in FireFox, Chrome e persino IE senza esagerare. Imposta l'immagine da qualche parte sulla pagina e nascondila fino a quando l'utente non stampa.

Il codice HTML nella pagina con l'immagine di sfondo

<img src="someImage.png" class="background-print-img">

Il Css

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

— ksealey
fonte

Ho adottato il tuo approccio e ho cercato di farlo funzionare su IE11, ma purtroppo non ha funzionato. Questo fino a quando non ho messo un !importantvalore su ogni attributo della mia classe che poi ha funzionato.

— Sal Alturaigi,

0

Evitare Non impostare l' background-colorall'interno del foglio di stile di stampa. Basta impostare l'attributo nel normale file CSS e funziona bene :)

Dai un'occhiata a questo esempio: il modello HTML di stampa definitiva con intestazione e piè di pagina

Demo: il modello HTML di stampa definitiva con la demo di intestazione e piè di pagina

— Dryden Williams
fonte

0

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Funziona in Chrome e Edge

— Vasily Ivanov
fonte