Purtroppo non c'è una buona risposta alla tua domanda - ma forse se si capisce il motivo per cui sta allora si può scegliere una via d'uscita.
Perché?
È vero che Bootstrap utilizza @media print { * { color: $fff; background: transparent; }} - ma c'è una ragione molto solida. Questo bit di codice è in realtà derivato dal progetto normalizer.css (da un college di @mdo, @necolas) - l'intento è quello di far sì che tutti i browser si comportino allo stesso modo. Questi ragazzi hanno scelto di "normalizzare" il css per una buona ragione:
Con la maggior parte dei browser si può scegliere di includere o escludere il colore di sfondo, quindi il comportamento non è standard anche su uno stesso browser. Immagina per un secondo un sito Web con uno sfondo molto scuro con testo bianco - quando si stampa con gli sfondi disattivati, sembrerà che non stiate stampando nulla - quando in realtà state stampando testo bianco su sfondo non (bianco).
Non c'era modo di tenere conto di tutti i diversi usi del colore, quindi hanno scelto di passare al nero (font) e al bianco (lo sfondo, in realtà 'trasparente'). Anche la scelta del nero è stata ben pensata: è una soluzione di stampa migliore, poiché la maggior parte delle stampanti a colori ha più "inchiostro/toner" nero (più economico) e non è necessario mescolare il colore per renderlo nero (quindi più veloce).
Ricorda che Bootstrap è anche un "framework" - quindi un punto di partenza se vuoi - e complimenti a @mdo e @necolas per avere la lungimiranza di pensare a questo in termini di stabilire una linea di base prevedibile. (No, non li conosco.)
No ...
Così il pensiero è: "cosa succederebbe se potessimo 'tornare indietro' e disinserire questa Purtroppo CSS non funziona così - sì browser caricare le dichiarazioni CSS in una. 'Coda', dove le vittorie ultima dichiarazione (LIFO , o last-in-first-out), ma non sono a conoscenza di un modo per rimuovere questo stack, quindi gli sviluppatori CSS aggiungono altro alla fine ...
Quindi si potrebbe pensare che possiamo tornare indietro in questo modo --- aggiungere un * { background-color: inherit }. il problema è che inherit devoluto alla proprietà padre, ma * è la radice, in modo che non ha nulla da ripristinare. lo stesso vale per initial!
Forse!
Quindi rimaniamo con 4 opzioni, nessuna è quella che speri, ma è quello che è. In ordine di difficoltà:
- Scaricare la sorgente BS (meno o più bassa), modificare il codice incriminato e quindi compilarlo. (È necessario utilizzare una copia locale, CDN non funzionerà.)
- Scarica la variante CSS di tua scelta, cerca ed elimina il codice incriminato. (Nessun CDN di nuovo.)
- Utilizzare getbootstrap.com/customize per creare una nuova variante - escludere "Stampa stili di supporto" in "Common CSS". (Anche in questo caso, nessun CDN)
- Ignora gli elementi specifici di colore che desideri stampare: ad es.
@media print {
.alert-danger {
color: yellow !important;
background-color: red !important;
}
}
copie del CDN di BS ora funziona, ma poi si ha il problema degli utenti forse non la stampa di sfondi e avere la bianca di uscita (giallo nella esempio) su bianco!
Infine
Beh spero imparando il perché di stato per lo meno un modo di pensare di una soluzione alternativa. La regola generale che seguo è che quando si stampa, lo sfondo è (dovrebbe essere) sempre bianco. Quando vincolati in questo modo inizi a pensare a idee nuove, come ad esempio "stampa" (@media only screen { .hidden-screen { display: none; }})
sostituisce questi stili nel tuo css personalizzato? non dirmi che non ci hai pensato ... –
Fai riferimento alla domanda di overflow dello stack http://stackoverflow.com/questions/14987496/background-color-not-show-in-print-preview –
Di che colore sei vuoi impostare come sfondo adesso mostrerà il nero giusto? – Mitul