Geek Answers Handbook

Override `background: transparent! Important` on Twitter Bootstrap CSS

You have an application that draws a div with the background color as its graphics.
These divisions appear on the screen, but div disappear when printing in PDF format.

Tracks the issue to Twitter Bootstrap CSS. Divas print fine if Bootstrap CSS is missing. But do not print when it is. See This JSFiddle:

http://jsfiddle.net/VYg9s/

I think the problem is this section of CSS CSS. I think I need to redefine background: transparent !important , but life cannot understand for me how to do this.

This is apparently simple. I tried background: opaque !important , but it did not work, and I can not find a list of valid values ​​for the background property.

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

What is the opposite of background: transparent !important; in CSS?

+7
css twitter-bootstrap twitter-bootstrap-3
source share
2 answers

The opposite of background: transparent !important; is background: color hex code !important;

"hex color code" can be any valid CSS color code type; like rgb, rgba, hex, etc.

+8
source share

To keep bootstrap.css intact, this is a way to win “who rewrites css slam” by embedding css media printing with jquery in the bottom of the head ...

 <!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>
-one
source share

More articles:


All Articles