Come faccio a fare in modo che Firefox stampi uno stile di sfondo colorato?

Question

ho qualche semplice CSS:

#someElement { 
    background-color:black; 
    color:white; 
} 

Sembra ok nel browser, ma quando vado a stamparlo in Firefox viene fuori come testo nero su sfondo bianco. Immagino che questa sia una sorta di funzionalità per risparmiare l'inchiostro, ma esiste un modo per aggirarla?

Answer 1

È un'impostazione del browser. Non c'è niente che puoi fare nel tuo CSS. In Windows - File > Page Setup... > Print Background.

Answer 2

Forse non è la risposta che state cercando, ma qui va:

preferirei aggiungere un foglio di stile separato per la stampa della pagina. In genere, è necessario rimuovere elementi quali i menu di navigazione, i breadcrumb, gli annunci e magari apportare piccole modifiche ai margini, ai paddings, ai bordi e ai caratteri rispetto al foglio di stile visualizzato sullo schermo.

Anche pensare di costringere l'utente a riempire un'intera pagina con inchiostro nero con testo bianco mi sembra sciocco.

Per aggiungere un foglio di stile di stampa separato, aggiungere un altro foglio di stile all'inizio della pagina.

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

Answer 3

ho trovato una soluzione, è un po 'hacky, ma con elementi CSS pseudo è possibile creare sfondi con i bordi di grasso. I bordi vengono stampati anche quando "stampa sfondi" è disattivato, basta renderli davvero spessi! Una nota, Firefox imposta tutti i colori dei caratteri bianchi in nero, quindi quando crei uno sfondo nero falso, Firefox rende ancora il testo nero, rendendo il testo invisibile. Comunque qui è:

Il codice HTML:

<div class="redBox"> 
    <div class="content">Black on red</div> 
</div> 

Il CSS:

.redBox { 
    /* o no, does not work with print */ 
    background-color: red; 
} 

@media print { 
    .redBox { 
    position: relative; 
    overflow: hidden; /* this might not work well in all situations */ 
    } 
    .redBox:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    /* and here it is, the background color */ 
    border: 99999px red solid; 
    z-index: 0; /* was required in my situation */ 
    } 
    .redBox * { 
    /* was required in my situation */ 
    position: relative; 
    z-index: 1; 
    } 
} 

Answer 4

C'è una soluzione semplice per questo.

Per background-color, invece di utilizzare:

background-color: red 

Usa:

background-color: unset; 
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
            number that is definitely 
            larger than the box dimension*/ 

---

Anche per color, invece di:

color: grey; 

Usa:

---

Si può limitare loro di stampare solo utilizzando @media print, ma non si deve!

---

Nota: A volte si dovrebbe usare background-color: transparent; o color: transparent; se il color o background-color sono ereditate da elementi padre.

Answer 5

Ecco come ho fatto a funzionare nel mio caso aggiungendo le due righe seguenti al div particolare. "@@ supports (-moz-appearance: meterbar)" è utile per aggiungere stili specifici per Firefox.

-webkit-print-color-adjust: esatto; regolazione del colore: esatta;

@@supports (-moz-appearance:meterbar) { 
    .container { 
     margin: 0; 
     font-size: 0.85em; 
     width: 100%; 
     -webkit-print-color-adjust: exact; 
     color-adjust: exact; 
    } 
}