Sovrascrivi `sfondo: trasparente! Importante` in Twitter Bootstrap CSS

Avere un'applicazione che disegna div s con colore di sfondo come grafica.
Questi div sembrano visualizzati bene sullo schermo ma i div s scompaiono quando si stampa su PDF.Sovrascrivi `sfondo: trasparente! Importante` in Twitter Bootstrap CSS

Tracciato il problema su Twitter Bootstrap CSS. I div si stampano bene quando Bootstrap CSS non è presente. Ma non stampare quando è. Vedere questo JSFiddle:

http://jsfiddle.net/VYg9s/

Credo che il problema è questo tratto di Twitter CSS. I penso Ho bisogno di ignorare il background: transparent !important ma non riesco a capire come.

Questo è presumibilmente semplice. Provato background: opaque !important ma non ha funzionato, e non riesco a trovare un elenco di valori consentiti per la proprietà background.

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

Qual è l'opposto di background: transparent !important; in CSS?

fonte

2013-12-12 prototype

L'opposto è background: transparent !important;background: color hex code !important;

"colore codice esadecimale" può essere di qualsiasi colore CSS accettabile tipo di codice; come RGB, RGBA, esadecimale, ecc

fonte

2013-12-12 03:39:49 DrCord

Perchè questo meriterebbe un -1, questo è corretto e ho avuto problemi di formattazione sul cellulare, ma è bene ora .. – DrCord

(Il -1 wa non da me l'OP.) Grazie, funziona! * MA * L'app attuale ha molte div diverse con colori diversi che scompaiono come risultato della direttiva di trasparenza di Bootstrap. Quello che posso fare con lo sforzo è aggiungere il colore per ognuno di essi. Considerando che il CSS Twitter ha aggiunto la trasparenza a livello globale. Potrebbe esserci un modo per renderli opachi a livello globale? – prototype

@ user645715 se non vuoi che Bootstrap lo faccia, dovresti semplicemente cancellarlo dal file bootstrap.css :) – Ming

-1

Per mantenere il bootstrap.css intatto questo è un modo per vincere la 'che sovrascrivendo css Slam' da iniettare supporti di stampa css con jquery in parte inferiore della testa ...

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>CssTest</title> 
 
    <link href="/libs/dev/bootstrap/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="/libs/dev/common.js"></script> 
 
</head> 
 
<body> 
 
    <button>Test Change/Add Dynamic</button><br /> 
 
    <br /> 
 
    <div id="test1" style="background-color: red; display: block; width: 500px; height: 100px"> 
 
     HELLO 
 
    </div> 
 
    <div id="test2" style="background-color: green; display: block; width: 500px; height: 100px"> 
 
     HELLO 
 
    </div> 
 
    <div id="test3" style="background-color: orange; display: block; width: 500px; height: 100px"> 
 
     HELLO 
 
    </div> 
 

 
    <script> 
 
     var app = {}; 
 
     app.updatePrintCSS = function (items) { 
 
      $("[data-role='printAdded']").remove(); 
 
      $(items).each(function (i, e) { 
 
       var data = "@@media print{#" + $(e).attr("id") + "{ background-color: " + $(e).css("background-color") + " !important; }}"; 
 
       $("<style data-role='printAdded'></style>").appendTo("head").html(data); 
 
      }); 
 
     } 
 
     $(function() { 
 
      app.updatePrintCSS($("div")); 
 
      $("button").on("click", function (e) { 
 
       $("#test3").css("background-color", "#FF69B4 !important"); 
 
       $("body").append($('<div id="test4" style="background-color: blue; display: block; width: 500px; height: 100px" >HELLO</div>')); 
 
       app.updatePrintCSS($('div')); 
 
      }); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

fonte

2015-05-04 12:48:47 iqmeta

Sovrascrivi `sfondo: trasparente! Importante` in Twitter Bootstrap CSS

risposta

Problemi correlati